From 666498ae1fe4e81c325ec931559370b6d826844b Mon Sep 17 00:00:00 2001 From: Jayavel Date: Mon, 27 Nov 2023 16:13:00 +0530 Subject: [PATCH 1/5] Fix(build-script): Upgrading package --- .github/workflows/ci.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 409b5603..e5052716 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,11 +1,13 @@ name: 'CI' on: pull_request: - types: [ opened, synchronize, reopened ] + types: [opened, synchronize, reopened] jobs: CI: runs-on: ubuntu-latest steps: + - name: Update package information with default mirror + run: sudo sed -i 's|mirror+file:/etc/apt/apt-mirrors.txt|http://archive.ubuntu.com/ubuntu|' /etc/apt/sources.list && sudo apt-get update - name: Install libvips run: sudo apt-get install libvips - uses: actions/checkout@v2 From 78ae0e318967808f0b963864f5479f1c16141754 Mon Sep 17 00:00:00 2001 From: Jayavel <59638803+jayavel-testsigma@users.noreply.github.com> Date: Mon, 27 Nov 2023 16:37:15 +0530 Subject: [PATCH 2/5] Fix(build-script): Upgrading package (#331) --- .github/workflows/cd.yml | 4 +++- .github/workflows/staging-cd.yml | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index ca2d2b8d..57878422 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -7,6 +7,8 @@ jobs: Deploy: runs-on: ubuntu-latest steps: + - name: Update package information with default mirror + run: sudo sed -i 's|mirror+file:/etc/apt/apt-mirrors.txt|http://archive.ubuntu.com/ubuntu|' /etc/apt/sources.list && sudo apt-get update - name: Install libvips run: sudo apt-get install libvips - uses: actions/checkout@v2 @@ -51,7 +53,7 @@ jobs: TYPESENSE_COLLECTION: ${{ secrets.TYPESENSE_COLLECTION }} TYPESENSE_API_KEY: ${{ secrets.TYPESENSE_API_KEY }} TYPESENSE_SEARCH_API_KEY: ${{ secrets.TYPESENSE_SEARCH_API_KEY }} - + - name: Start Gatsby server run: npm run develop & env: diff --git a/.github/workflows/staging-cd.yml b/.github/workflows/staging-cd.yml index 78e4c346..e359d5ba 100644 --- a/.github/workflows/staging-cd.yml +++ b/.github/workflows/staging-cd.yml @@ -7,6 +7,8 @@ jobs: StagingDeploy: runs-on: ubuntu-latest steps: + - name: Update package information with default mirror + run: sudo sed -i 's|mirror+file:/etc/apt/apt-mirrors.txt|http://archive.ubuntu.com/ubuntu|' /etc/apt/sources.list && sudo apt-get update - name: Install libvips run: sudo apt-get install libvips - uses: actions/checkout@v2 @@ -38,7 +40,7 @@ jobs: echo TYPESENSE_SEARCH_API_KEY=${{ secrets.WEBSITE_STAGING_TYPESENSE_SEARCH_API_KEY }} >> .env cat .env - name: Set environment - run : sed -i 's/localhost/website.testsigma.com/g' src/environment.ts + run: sed -i 's/localhost/website.testsigma.com/g' src/environment.ts - name: Build run: | PREFIX_PATHS=true npm run build && npm run deploy From 511592ef641d41f3f7d3e090e48aae0519d5907c Mon Sep 17 00:00:00 2001 From: Santhoshkumar <117272529+Santhosh-testsigma@users.noreply.github.com> Date: Mon, 27 Nov 2023 17:44:47 +0530 Subject: [PATCH 3/5] Added styling for black friday deal campaign hello bar (#329) --- src/templates/page.scss | 55 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/src/templates/page.scss b/src/templates/page.scss index 8032ee5a..b8c6d0c0 100644 --- a/src/templates/page.scss +++ b/src/templates/page.scss @@ -662,14 +662,16 @@ table{ // Cookie banner #hs-banner-parent{ .hs-cookie-notification-position-bottom{ - width: calc(min(28em, 100%)); - left: 14%; + width: calc(min(28em, 100%)) !important; + left: calc(min(15em, 100%)) !important; @media only screen and (max-width: 767px) { left: 3%; + bottom: 2%; width: 95%; } @media only screen and (min-width:768px) and (max-width: 1023px) { left: 20%; + bottom: 10%; width: 35%; } #hs-eu-cookie-confirmation-inner{ @@ -685,4 +687,51 @@ table{ } } } -} \ No newline at end of file +} + +//Black-friday hello bar design +#leadinModal-4801049{ + .leadinModal-content { + background: linear-gradient( + 92deg, + #4dd795 37.61%, + rgba(96, 217, 188, 0.83) 76.64% + ) !important; + .leadinModal-content-wrapper { + .leadin-content-body { + .leadin-preview-wrapper { + h4 { + @apply font-bold; + font-size: 1.6rem; + line-height: normal; + color: #000000 !important; + margin: 0 auto; + margin-left: auto !important; + margin-right: auto; + text-align: center !important; + font-style: normal; + } + .advance-wrapper { + @media (max-width: 767px) { + @apply mt-8; + } + .leadin-button { + @apply font-bold text-center; + font-size: 1.4rem; + color: #fff !important; + border-radius: 3px; + background-color: #191919 !important; + font-style: normal; + height: 2.7rem; + } + } + } + } + } + .leadinModal-close{ + &::before{ + color: #000000 !important; + } + } + } +} From e9f400048b5dd8e267882f3bfa709238bf9b4929 Mon Sep 17 00:00:00 2001 From: Santhoshkumar <117272529+Santhosh-testsigma@users.noreply.github.com> Date: Mon, 27 Nov 2023 19:15:53 +0530 Subject: [PATCH 4/5] fix: Black friday deal hello bar UI issue fixed (#333) --- src/templates/page.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/templates/page.scss b/src/templates/page.scss index b8c6d0c0..9c919afa 100644 --- a/src/templates/page.scss +++ b/src/templates/page.scss @@ -702,7 +702,7 @@ table{ .leadin-preview-wrapper { h4 { @apply font-bold; - font-size: 1.6rem; + font-size: 16px; line-height: normal; color: #000000 !important; margin: 0 auto; @@ -717,12 +717,11 @@ table{ } .leadin-button { @apply font-bold text-center; - font-size: 1.4rem; + font-size: 14px; color: #fff !important; border-radius: 3px; background-color: #191919 !important; font-style: normal; - height: 2.7rem; } } } From da948dabb9a7a6a37670113704060bb216d78184 Mon Sep 17 00:00:00 2001 From: Bharath Krishna <118433150+bharathk08@users.noreply.github.com> Date: Tue, 28 Nov 2023 09:51:35 +0530 Subject: [PATCH 5/5] Bulk update of Elements section. (#328) --- src/left-nav-title.json | 25 +-- .../android-apps/capture-single-element.md | 136 ++++++++-------- .../elements/android-apps/create-manually.md | 127 ++++++--------- .../creating-locators-manually-strategies.md | 4 + .../docs/elements/android-apps/overview.md | 54 +++++-- .../android-apps/record-multiple-elements.md | 75 ++++----- .../android-apps/supported-locator-types.md | 21 +-- .../desktop-windows/record-elements.md | 73 +++++---- .../dynamic-elements/with-environment-data.md | 2 +- .../with-parameter-test-data.md | 2 +- .../with-runtime-test-data.md | 2 +- src/pages/docs/elements/import-export.md | 2 +- .../ios-apps/capture-single-element.md | 146 +++++++++--------- src/pages/docs/elements/ios-apps/overview.md | 53 +++++-- .../ios-apps/record-multiple-elements.md | 72 +++++---- .../mobile-web-application/create-manually.md | 52 +++++-- .../mobile-web-application/record-elements.md | 48 +++--- .../web-apps/capture-single-element.md | 116 +++++++------- .../docs/elements/web-apps/create-manually.md | 122 ++++++--------- .../creating-locators-manually-strategies.md | 43 ++---- .../docs/elements/web-apps/iframe-elements.md | 21 +-- src/pages/docs/elements/web-apps/overview.md | 106 ++++--------- .../web-apps/record-multiple-elements.md | 59 +++---- .../docs/elements/web-apps/shadow-dom.md | 5 +- .../web-apps/supported-locator-types.md | 43 +++--- .../docs/elements/web-apps/verify-elements.md | 11 +- 26 files changed, 708 insertions(+), 712 deletions(-) diff --git a/src/left-nav-title.json b/src/left-nav-title.json index 895b33ea..f2b8f884 100644 --- a/src/left-nav-title.json +++ b/src/left-nav-title.json @@ -215,23 +215,23 @@ "/docs/test-data/data-generators/overview/": "Test Data Generators" }, "elements": { - "/docs/elements/": "Elements(Objects)", + "/docs/elements/": "Elements (Objects)", "/docs/api/elements/": "Elements" }, "record-multiple-elements": { - "/docs/elements/web-apps/record-multiple-elements/": "Record Multiple Elements[Recorder]", - "/docs/elements/android-apps/record-multiple-elements/": "Record Multiple Elements[Recorder]", - "/docs/elements/ios-apps/record-multiple-elements/": "Record Multiple Elements[Recorder]" + "/docs/elements/web-apps/record-multiple-elements/": "Record Multiple Elements", + "/docs/elements/android-apps/record-multiple-elements/": "Record Multiple Elements", + "/docs/elements/ios-apps/record-multiple-elements/": "Record Multiple Elements" }, "capture-single-element": { - "/docs/elements/web-apps/capture-single-element/": "Capture Single Element[Recorder]", - "/docs/elements/android-apps/capture-single-element/": "Capture Single Element[Recorder]", - "/docs/elements/ios-apps/capture-single-element/": "Capture Single Element[Recorder]" + "/docs/elements/web-apps/capture-single-element/": "Record Single Element", + "/docs/elements/android-apps/capture-single-element/": "Record Single Element", + "/docs/elements/ios-apps/capture-single-element/": "Record Single Element" }, "create-manually": { - "/docs/elements/web-apps/create-manually/": "Create Elements [Manually]", - "/docs/elements/android-apps/create-manually/": "Create Elements [Manually]", - "/docs/elements/ios-apps/create-manually/": "Create Elements [Manually]" + "/docs/elements/web-apps/create-manually/": "Create Elements", + "/docs/elements/android-apps/create-manually/": "Creating Elements Manually", + "/docs/elements/ios-apps/create-manually/": "Create Elements" }, "supported-locator-types": { "/docs/elements/web-apps/supported-locator-types/": "Supported Locator Types", @@ -239,7 +239,7 @@ "/docs/elements/ios-apps/supported-locator-types/": "Supported Locator Types" }, "creating-locators-manually-strategies": { - "/docs/elements/web-apps/creating-locators-manually-strategies/": "Different Strategies for Formulating Elements", + "/docs/elements/web-apps/creating-locators-manually-strategies/": "Formulating Elements", "/docs/elements/android-apps/creating-locators-manually-strategies/": "Different Strategies for Formulating Elements", "/docs/elements/ios-apps/creating-locators-manually-strategies/": "Different Strategies for Formulating Elements" }, @@ -583,5 +583,8 @@ }, "multiple-webviews":{ "/docs/test-cases/create-test-steps/actions-and-options-recorder/multiple-webviews/": "Tests for Multiple WebViews" + }, + "ios-apps":{ + "/docs/elements/ios-apps/overview/": "iOS Apps" } } \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/capture-single-element.md b/src/pages/docs/elements/android-apps/capture-single-element.md index 6b04cc81..dc7e9b31 100644 --- a/src/pages/docs/elements/android-apps/capture-single-element.md +++ b/src/pages/docs/elements/android-apps/capture-single-element.md @@ -1,22 +1,19 @@ --- -title: "Create One Element at a Time (Using Mobile Inspector) for an Android Project" +title: "Capture Single Element Using Recorder" metadesc: "Learn how to create one element at a time using the Testsigma mobile inspector for an android project in Testsigma application." noindex: false -order: 6.33 +order: 6.32 page_id: "Create One Element at a Time (Using Mobile Inspector) for an Android Project" warning: false contextual_links: - type: section name: "Contents" - type: link - name: "Introduction" - url: "#introduction" + name: "Prerequisites" + url: "#prerequisites" - type: link - name: "Pre-requisites" - url: "#pre-requisites" -- type: link - name: "How to create one element at a time using the Testsigma mobile inspector for an android project in Testsigma" - url: "#how-to-create-one-element-at-a-time-using-the-testsigma-mobile-inspector-for-an-android-project-in-testsigma" + name: "Steps to Create an Element" + url: "#steps-to-create-an-element" - type: link name: "Updating an Element" url: "#updating-an-element" @@ -27,114 +24,113 @@ contextual_links: --- -## **Introduction** -In an Android project in Testsigma, you can selectively capture elements one at a time using the Testsigma mobile test recorder. -
+ +In an Android project in Testsigma, you can selectively capture elements one at a time using the Testsigma recorder. This article discusses how to capture single element using recorder. + --- -## **Pre-requisites** -1. You should have an android project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). -2. Your android applications’ apk should be uploaded in Testsigma so that the mobile test recorder can record elements from it. See [uploading apps to Testsigma](https://testsigma.com/docs/uploads/upload-apps/). -
+## **Prerequisites** +- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. + +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). + +- An Android app to test. --- -## **How to create one element at a time using the Testsigma mobile test recorder for an android project in Testsigma** -1. On the ‘All Elements’ page, click on the ‘Create’ button on the top right corner of the page: +## **Steps to Create an Element** -![create-button-on-elements-page-under-create-one-element-at-a-time-for-an-android-project-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/capture-single-element/create-button-on-elements-page-under-create-one-element-at-a-time-for-an-android-project-in-Testsigma.png) +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseapnavele.png) -2. On the ‘Create Element’ layover that appears, select the option ‘Element Inspector’: -![element-inspector-radio-button-on-create-element-layover-under-create-one-element-at-a-time-for-an-android-project-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/capture-single-element/element-inspector-radio-button-on-create-element-layover-under-create-one-element-at-a-time-for-an-android-project-in-Testsigma.png) +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceurcorec.png) -3. Now select the lab, version, device, and the apk you want to capture the element from, and then click on the button ‘Launch’. This launches the Mobile test recorder which should look something like this: -![Single Element recorder interface for Android](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/capture-single-element/android-single-element-recorder-interface.png) +3. On **Record elements** overlay, select **Test Lab**, **Test Machine**, **Upload App Source** and click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceurstltmar.png) -4. Make sure that the "Select Element" Button is selected, using the button highlighted below: -![Select Element Button in Element recorder interface](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/capture-single-element/android-single-element-recorder-interface-select-button.png) +4. Wait for the app to load fully. -5. Now click on the element that you want to capture. On the element form that opens up, enter the ‘element name’ and ‘screen name’. You can also change the element type according to your preference in this form: -![Single Element Recorder Interface Element Form](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/capture-single-element/android-single-element-recorder-interface-element-form.png) +5. Once the app is loaded, click on element you want to capture. +![Element to Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacoe.png) -6. Once you enter the required details in the element form, click on the button ‘Save & Close’. The element will be saved in the project’s element list and the mobile test recorder will be closed. -You can also [capture multiple elements at once via mobile test recorder](https://testsigma.com/docs/elements/android-apps/record-multiple-elements/). +6. On the **Create Element** section, enter the **Name**, **Screen Name**, select the **Element Type**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaces.png) -## **Updating an Element** +7. Click on **Create**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacocrt.png) - 1. Create a Test Case using Testsigma’s test Recorder in your Android Project. - 2. On the Recorder UI, hover over the step that has the element you want to edit. The elements appear in green on the Testsigma test Recorder UI -![Highlighted example elements in Testsigma Recorder](https://docs.testsigma.com/images/update-elements/highlighted-example-elements-android-testsigma-Recorder.png) - +8. The element will be saved in the elements list. +![Saved](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaecrted.png) - 3. Click on the ‘More Details’ button corresponding to the step that you want to edit. The button corresponding to the step is highlighted in the screenshot below: +9. Stop the recorder to close the session. -![more details button for a test step in an Android Project in Testsigma while using the Recorder](https://docs.testsigma.com/images/update-elements/more-details-button-for-a-test-step-android-testsigma-Recorder.png) +### **Creating an Element While Creating Test Case** - 4. Click on ‘More details’ button: +Alternatively, you can also create the element while creating test case by following the steps below. -![test step details for an Android test case on Testsigma Recorder UI](https://docs.testsigma.com/images/update-elements/test-step-details-testsigma-Recorder-android.png) +1. Hover over the element on the test step and click on **Create Element** from the dropdown. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacrelwctc.png) - 5. Click on the edit button corresponding to the element on the Test Step Details: +2. On **Create Element** overlay, enter **Name**, **Screen Name**, select the **Element Type** and click on **Create Element**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacrelem.png) -![edit element button on test step details section for testsigma Recorder for android](https://docs.testsigma.com/images/update-elements/edit-element-button-test-step-details-testsigma-Recorder-android.png) -  +--- -![edit element UI from test step details section on the Recorder UI for an android project in Testsigma](https://docs.testsigma.com/images/update-elements/edit-element-ui-from-test-step-details-Recorder-android-testsigma.png) -  +## **Updating an Element** -Here are the fields that appear on the ‘Edit Element’ window: +1. Hover over the element and click on **Edit**. +![Edit](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseceditelm.png) - * **Name**: Text input field, you can edit the name of the Element here - * **Screen Name**: This is an editable field, you can edit the screen name for the Element here. - * **Element Type**: This is a drop-down field that has values: - 1. Xpath - 2. ID - 3. Name - 4. Class Name - 5. Accessibility ID +2. On the **Update Element** section, update the **Name**, **Screen Name**, select the **Element Type**. +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseceditelm.png) -You can select any of these options for element type. - * **Enter Value**: Here, the value should correspond to the element type selected. This is also an editable field. +3. Click on **Update**. +![Click on Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseceaupdate.png) +### **Updating an Element While Creating Test Case** -6. Click on the ‘Update’ button to finalize the changes. +Alternatively, you can also update the element while creating test case by following the steps below. ---- +1. Hover over the element on the test step and click on **Edit Element**. +![Edit Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecuewctc.png) +2. On **Update Element** overlay, update the **Name**, **Screen Name**, select the **Element Type**. +![Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecuewctcdtls.png) -## **Reusing Elements Recorded** +3. Click on **Update Element** +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecupdewctc.png) - 1. Create a test case in which you will be reusing your pre-recorded elements. - 2. Start recording test steps for the test case. - 3. Manually add a test step where you want to reuse elements: +--- -![example of test steps that contain elements in an android project in Testsigma](https://docs.testsigma.com/images/reuse-elements/test-steps-that-contain-elements-testsigma-android.png) +## **Reusing Elements Recorded** -  +1. Create a test case in which you will be reusing your pre-recorded elements. -Alternatively, you can record a test step that uses an element. Given below is an example of test steps as they appear on Recorder UI. The text in green is an element. +2. Start recording test steps for the test case. -![example of recorded test steps that contain elements for an android project in Testsigma](https://docs.testsigma.com/images/reuse-elements/recorded-test-steps-that-contain-element-testsigma-android.png) +3. Hover over the element on the test step where you want to reuse the saved element and click on **Change Element**. +![Change Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraachangeelem.png) - 4. Hover on the test step that you want to edit and click on the corresponding edit button. - 5. Click on the green text that represents ‘element’. The ‘Elements’ section appears on the test Recorder UI, listing all pre-recorded elements in the project: +4. On **Elements** overlay, select the element you want to reuse. +![Reuse](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraachangeelemn.png) -![Elements screen to reuse elements in Testsigma Recorder for an android project](https://docs.testsigma.com/images/reuse-elements/Element-screen-reuse-elements-testsigma-Recorder-android.png) +5. Click on **Update Step** to finalize the change. +![Update Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaustep.png) - 6. Start typing the name of the element that you want to reuse, the elements will be filtered by name. You can search the elements by name or by Screen name. - 7. From the filtered results, you can click on the element that you want to use, and the element text in your test step will be replaced by the chosen element. - 8. Click on ‘Update’ button corresponding to the test step on the Testsigma test Recorder UI to finalize the change. +[[info | **NOTE**:]] +| You can also reuse the element by following the same steps while creating a test case manually. --- \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/create-manually.md b/src/pages/docs/elements/android-apps/create-manually.md index c5ad3396..1c4e6f08 100644 --- a/src/pages/docs/elements/android-apps/create-manually.md +++ b/src/pages/docs/elements/android-apps/create-manually.md @@ -1,5 +1,5 @@ --- -title: "Create Elements [Manually]" +title: "Create Elements Manually" metadesc: "Element path plays an important role in dynamic websites. Learn how to create elements manually for a android apps in Testsigma application" noindex: false order: 6.34 @@ -8,15 +8,12 @@ warning: false contextual_links: - type: section name: "Contents" -- type: link - name: "Introduction" - url: "#introduction" - type: link name: "Prerequisites" url: "#prerequisites" - type: link - name: "Creating Elements" - url: "#creating-elements" + name: "Steps to Create an Element" + url: "#steps-to-create-an-element" - type: link name: "Creating Element While Adding Test Steps" url: "#creating-element-while-adding-test-steps" @@ -31,123 +28,95 @@ contextual_links: --- -In this document, we will discuss how to create elements manually for your android project in Testsigma i.e. without the use of a mobile test recorder. +In Testsigma, you can also create elements manually for your android project without using recorder. This article discusses how to create elements manually with simple steps. --- ## **Prerequisites** -- You should have an android project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). - ---- -## **Creating Elements** -1. Go to your android project, then go to Test Development > Elements. -2. On the ‘All Elements’ page that appears, click on the create button on the top right: +- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. -![all-elements-page-for-an-android-project-with-Manually-radio-button-selected](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/create-manually/all-elements-page-for-an-android-project-with-Manually-radio-button-selected.png) +- An Android app to test. -3. The ‘Create Element’ form opens up, like this: - -![create-element-form-in-Testsigma-for-an-android-project-with-Manually-radio-button-selected](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/create-manually/create-element-form-in-Testsigma-for-an-android-project-with-Manually-radio-button-selected.png) +--- -4. Create the element either manually or via element inspector. In this document, we will cover how to create elements ‘manually’. You can also [capture elements via Testsigma’s mobile test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/). For now, select the radio button ‘Manually’. +## **Steps to Create an Element** -5. You will see the form options as shown in the screenshot below: +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseapnavele.png) -![create element form in Testsigma for an android project with Manually radio button selected](https://docs.testsigma.com/images/create-manually/create-element-manually-android-testsigma.png) +2. Click on **Create Element**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemnave.png) -Here are the fields that you will see:
-   1. **Name:** Enter the name you want to give your element.
-   2. **Screen Name:** Mention the screen that your element resides on.
-   3. **Element Type:** There are 5 types of element types supported in Testsigma. This field is a drop-down list and you can select any one of them: XPATH, ID, Name, Class Name, or Accessibility ID
+3. On **Create Element** overlay, you'll see the following fields: +![Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemceovr.png) + - **Name:** Enter the name you want to give your element. + - **Screen Name:** Mention the screen that your element resides on. + - **Element Type:** There are 5 types of element types supported in Testsigma. This field is a drop-down list; you can select any of them: **XPATH**, **ID**, **Name**, **Class Name**, or **Accessibility ID**. + - **Enter Value:** Enter the value corresponding to the **Element Type** you selected. -![element type dropdown values on the create element form for android project in Testsigma](https://docs.testsigma.com/images/create-manually/element-type-dropdown-value-create-an-element-android-testsigma.png) -  4. **Enter Value:** Enter the value here that is in correspondence with the element Type you selected. +4. Once you have added all the details, click on **Create element**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemcoce.png) -
+5. The element will be saved in the elements list. -6. Once you have added all the details, click on the ‘Create’ button and the element you created will be added to the project. +[[info | **NOTE**:]] +| You can also create elements using the recorder by clicking on **Record Element** from the **Create Element** page. +| ![Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemurecr.png) --- -## **Creating Element While Adding Test Steps** - 1. Create a test case or go to a pre-existing test case. - 2. Add a test step to the test case that contains an element. The language for the test step should contain an element. Some examples of such steps for an android application are shown in the screenshot below: - -![the various Action test steps for android application in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-various-Actions-test-steps-android-testsigma.png) - - 3. Let’s say we add a step ‘Tap on element’ to our test case: - -![Element specific test step test case page for android project in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-element-specific-test-step-test-case-page-android-testsigma.png) - - 4. On the step, click on the green text ‘element’, a layover will appear containing the elements in the project like this: -![Elements layover over a test case page for android project in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-elements-layover-over-test-case-page-android-testsigma.png) +## **Creating Element While Adding Test Steps** - 5. Here, to create an element that is not in the list, start typing a new name for the element, the option “NEW” will appear like this: +1. Navigate to **Create Tests > Test Cases**, click on **Create Test Case** or go to a pre-existing test case. +![Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemnavtc.png) -![add new element with a new name on test case page for android project in Testsigma](https://docs.testsigma.com/images/create-a-new-element/add-new-element-with--new-name-test-case-page-android-testsigma.png) - 6. Click on the ‘NEW’ button highlighted in the last step. ‘Create Element’ form will open up as shown in the screenshot below: +2. Add a test step to the test case that contains an element. -![create element form on test case page for android project in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-create-element-form-on-test-case-page-android-testsigma.png) - 7. Create the element either manually or via element Test recorder. In this document, we will cover how to create elements ‘manually’. You can also [capture elements via Test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/). For now, select the radio button ‘Manually’. +3. Hover over the ***element*** and select **Create Element** from the dropdown. +![Dropdown](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemcocelaa.png) - 8. You will see the form options as shown in the screenshot below: +Follow the steps 3-5 from above section to create an element manually. -![create element form in Testsigma for an android project with Manually radio button selected ](https://docs.testsigma.com/images/create-a-new-element/create-element-manually-android-testsigma.png) +--- -  +## **Updating an Element** -Here are the fields that you will see: - 1. **Name**: Enter the name you want to give your element. - 2. **Screen Name**: Mention the screen that your element resides on. - 3. **Element Type**: There are 5 types of identifier types supported in Testsigma. This field is a drop-down list and you can select any one of them: XPATH, ID, Name, Class Name, or Accessibility ID - 4. **Enter Value**: Enter the value here that is in correspondence with the Identifier Type you selected -![element type dropdown values on the create element form for android project in Testsigma](https://docs.testsigma.com/images/create-a-new-element/element-type-dropdown-value-create-an-element-android-testsigma.png) +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseapnavele.png) - 9. Once you have added all the details, click on the ‘Create’ button. The green text ‘element’ will be replaced in the test step you were creating. - You can now continue adding the test step for your android project. +2. Hover over the element you want to update and click on the **kebab menu** to open a dropdown menu. Click on **Edit** from the dropdown. +![Edit](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemaaedit.png) ---- -## **Updating an Element** +3. On the **Update Element** overlay, you can update the **Name**, **Screen Name**, select the **Element Type**. +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemuelem.png) - 1. Select your project and then navigate to **Test Development > Elements** - 2. **All Elements** page will appear. This contains all the elements that you have created for the selected android project, like this: -![all elements page to update elements for android project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/android-apps/update-elements/all-elements-page-update-elements-android-testsigma.png) +4. Click on **Update**. +![Click on Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemcouelem.png) - 3. Scroll or filter to find the element you want to update. - 4. Hover over the element and click on the **Edit** that appears. The button is also highlighted in the screenshot below: -![edit button for an element in all elements page for android project in Testsigma](https://docs.testsigma.com/images/update-elements/edit-button-for-an-element-in-all-elements-android-testsigma.png) - - 5. The Edit Element layover will appear: - -![edit element page to update elements for android project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/android-apps/update-elements/edit-element-page-update-elements-android-testsigma.png) - -There is a radio button that lets you choose between **Manually** or **Element Inspector**. When **Manually** is selected, you can make the changes you need to make in this element on the form and click on **Update** to finalize the changes. For the Test recorder approach, see how to [update elements using Test recorder](https://testsigma.com/docs/test-cases/create-steps-recorder/android-apps/update-elements/). --- ## **Updating Multiple Elements** - 1. Select your android project and then navigate to **Test Development > Elements** - 2. On the top right, there is an option to export the elements in excel format: - -![export button on all elements page to update elements for an android project Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/android-apps/update-elements/export-button-all-elements-page-update-elements-android-testsigma.png) - - 3. In the excel sheet, update the required fields for the required elements. - 4. Click on **Import**. Select the excel sheet you updated in step 3 for import. +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseapnavele.png) -![import button on all elements page to update elements for an android project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/android-apps/update-elements/import-button-all-elements-page-update-elements-android-testsigma.png) +2. Click on **Export**. +![Export](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemexpelm.png) -With import, the edits done in step 3 will be visible in the corresponding elements in your android project in Testsigma. +3. In the downloaded XLSX file, update the required fields for the required elements. +4. Click on **Import** and choose the updated XLSX file for import. +![Import](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemimpelem.png) --- \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/creating-locators-manually-strategies.md b/src/pages/docs/elements/android-apps/creating-locators-manually-strategies.md index fd59931f..b2dce019 100644 --- a/src/pages/docs/elements/android-apps/creating-locators-manually-strategies.md +++ b/src/pages/docs/elements/android-apps/creating-locators-manually-strategies.md @@ -13,3 +13,7 @@ Elements here refer to the different objects in your android application that fo 1. **Manual Creation:** Here, you manually give the details of the element to create them. See [creating elements manually](https://testsigma.com/docs/elements/android-apps/create-manually/). 2. **Via mobile test recorder:** Here, you access your application’s UI via the mobile test recorder and inspect the elements that you want to capture. See [capturing elements via the mobile test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/). + + + +--- \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/overview.md b/src/pages/docs/elements/android-apps/overview.md index a89e8c7f..156ba0eb 100644 --- a/src/pages/docs/elements/android-apps/overview.md +++ b/src/pages/docs/elements/android-apps/overview.md @@ -1,38 +1,60 @@ --- -title: "Overview of Elements for an Android Project" +title: "Elements for an Android Project - Overview" metadesc: "What are elements in an Android project in Testsigma. Also learn how these elements can be captured in 2 different ways in Testsigma" noindex: false order: 6.31 page_id: "Overview of Elements for an Android Project" warning: false +contextual_links: +- type: section + name: "Contents" +- type: link + name: "Ways to Create Elements" + url: "#ways-to-create-elements" +- type: link + name: "Supported Locator Types" + url: "#supported-locator-types" --- + +--- + + +Element in an Android project in Testsigma refers to an object that forms a part of the application's UI and can be located or identified. This article discusses an overview of elements for an Android project. + + +--- + +## **Ways to Create Elements** + +There are 2 different ways to create elements in Testsigma: + +1. **Manual Creation:** Here, you manually give the details of the element to create them. For more information, see [creating elements manually](https://testsigma.com/docs/elements/android-apps/create-manually/). +2. **Using Test Recorder:** Here, you access your application’s UI using test recorder and inspect the elements that you want to capture. For more information, see [capturing elements using test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/). + --- -Element in an Android project in Testsigma refers to an object that forms a part of the UI of the application and can be located or identified. -These elements can be captured in 2 different ways in Testsigma: +## **Supported Locator Types** -1. **Manual creation:** Here, you manually give the details of the element to create them. See [creating elements manually](https://testsigma.com/docs/elements/android-apps/create-manually/). -2. **Via mobile test recorder:** Here, you access your application’s UI via the mobile test recorder and inspect the elements that you want to capture. See [capturing elements using Mobile test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/). +When creating elements for an application, you need to provide a way to identify them uniquely. Testsigma supports five ways to identify or locate these elements for your automated tests uniquely. The five supported locator types are: -Testsigma supports 5 locator types to identify these elements for your automated tests: +1. **Accessibility ID:** This is the most preferred locator to automate your tests, as this attribute would remain the same for other platforms like iOS, too, and makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. + + +2. **ID:** After accessibility ID, this is the second preferred locator. Every element is supposed to have a unique ID. -1. **Accessibility ID:** This is the most preferred locator to use to automate your Android tests, as this is an attribute that remains the same across platforms (like iOS). That makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. -2. **ID:** After accessibility ID, this is the second preferred locator to use. Every element is supposed to have a unique ID. [[info | NOTE:]] -| If you are facing difficulty finding IDs for your elements, talk to your developer about it. -1. **XPATH:** XPath stands for XML Path Language, and will parse the source code to get the value of the referred element. -Class Name: This will be the value assigned to the attribute ‘Class Name’ for the element you want to capture. -4. **Name:** This will be the value assigned to the attribute ‘Name’ for the element you want to capture. +| If you are facing difficulty finding IDs for your elements, you should talk to your developer about it. + +3. **XPATH:** XPath stands for XML Path Language and will parse the source code to get the value of the referred element. -These elements can be captured in 2 ways: -1. [Capture one element at one time](https://testsigma.com/docs/elements/android-apps/capture-single-element/)
-2. [Capture multiple elements at one time](https://testsigma.com/docs/elements/android-apps/record-multiple-elements/)
+4. **Class Name:** This will be the value assigned to the attribute **Class Name** for the element you want to capture. -To know about the various actions that can be taken on the elements in a project in Testsigma, see [Bulk actions on elements](https://testsigma.com/docs/test-cases/create-steps-recorder/android-apps/bulk-actions/). +5. **Name:** This will be the value assigned to the attribute **Name** for the element you want to capture. +--- \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/record-multiple-elements.md b/src/pages/docs/elements/android-apps/record-multiple-elements.md index f3cb1453..f9903e0a 100644 --- a/src/pages/docs/elements/android-apps/record-multiple-elements.md +++ b/src/pages/docs/elements/android-apps/record-multiple-elements.md @@ -1,74 +1,75 @@ --- -title: "Record Multiple Elements for an Android Application" -metadesc: "Elements path play an important role in Automation Testsing. Learn how to record multiple elements for a Mobile Web Application project in Testsigma." +title: "Capture Multiple Elements Using Recorder" +metadesc: "Elements path play an important role in Automation Testsing. Learn how to record multiple elements for an android application project in Testsigma." noindex: false -order: 6.32 +order: 6.33 page_id: "Record Multiple Elements for an Android Application" warning: false contextual_links: - type: section name: "Contents" - type: link - name: "Introduction" - url: "#introduction" + name: "Prerequisites" + url: "#prerequisites" - type: link - name: "Pre-requisites" - url: "#pre-requisites" -- type: link - name: "How to record multiple elements for an android project in Testsigma" - url: "#how-to-record-multiple-elements-for-an-android-project-in-testsigma" + name: "Steps to Create Multiple Elements" + url: "#steps-to-capture-multiple-elements" +--- +--- +When automating test cases for an android application, you can capture multiple elements from the application in one go. This article discusses how to capture multiple elements using recorder. --- ---- -## **Introduction** -When automating test cases for an android application, you can capture multiple elements from the application in one go. This article covers how to do that. +## **Prerequisites** -
+- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. ---- -## **Pre-requisites** -1. You should have an android project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). -2. Your android applications’ apk should be uploaded in Testsigma so that the mobile test recorder can record elements from it. See [uploading apps to Testsigma](https://testsigma.com/docs/uploads/upload-apps/). +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). -
+- An Android app to test. --- -## **How to record multiple elements for an android project in Testsigma** -1. On the ‘All Elements’ page, click on the ‘Record’ button on the top right corner of the page: -![record-button-under-record-multiple-elements-for-an-android-project-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/record-button-under-record-multiple-elements-for-an-android-project-in-Testsigma.png) +## **Steps to Capture Multiple Elements** + +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseapnavele.png) + +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceurcorec.png) -2. On the 'Record Element' window that appears, you can select the device version and the device of your choice from the drop-down list. The device selection appears as shown in the screenshot below. -![record element window under record multiple elements for an android project in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/record-element-window-record-multiple-elements-android-testsigma.png) +3. On **Record elements** overlay, select **Test Lab**, **Test Machine**, **Upload App Source** and click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceurstltmar.png) -3. Once you have selected the version, device, and the apk you want to launch, click on the record button on the ‘Record Element’ window. -4. The mobile test recorder screen should appear like this: -![Element recorder interface for Android](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/android-element-recorder-interface-1.png) +4. Wait for the app to load fully. -5. Make sure that the button "Select Element" is selected. The "Select Element" button is highlighted in the screenshot below: +5. Once the app is loaded, click on element you want to capture. +![Element to Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacoe.png) -![Select Element Button in Element recorder interface for Android](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/android-element-recorder-interface-select-element-button-1.png) +6. On the **Create Element** section, enter the **Name**, **Screen Name**, select the **Element Type**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaces.png) -6. Now click on the element that you want to capture. On the element form that opens up, enter the ‘element name’ and ‘screen name’. You can also change the element type according to your preference in this form: -![Android Element Recorder Element Form ](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/android-element-recorder-element-form-1.png) +7. Click on **Create**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraacocrt.png) -7. Once you’ve entered the details in the element form, click ‘Done’. The captured element will appear under elements on the same screen: -![One Element Saved in Android Element Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/android-element-recorder-one-element-saved-1.png) +8. The element will be saved in the elements list. +![Saved](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaecrted.png) -The elements can also be edited or deleted from this list using the ‘edit’ and ‘delete’ buttons that appear at the end of the element rows. -8. Repeat steps 6 and 7 for every element you want to capture. -9. Once you have captured the elements, click on the ‘Save’ button on the ‘Elements’ list to save the changes in the project. Once saved, a checkmark icon will appear corresponding to all the saved elements in the element list: +8. Repeat steps 5 to 7 for every element you want to capture. -![Multiple Elements Saved in Android Element Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/android-apps/record-multiple-elements/android-element-recorder-multiple-elements-saved-1.png) +9. Once you have captured the elements, click on **Stop Recording**. +![Stop Recording](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceurmesr.png) +10. You'll be redirected to the **Elements** page, where you can see all recorded elements. +![All Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraelem.png) +--- \ No newline at end of file diff --git a/src/pages/docs/elements/android-apps/supported-locator-types.md b/src/pages/docs/elements/android-apps/supported-locator-types.md index 1a7ddb6c..92a0efb3 100644 --- a/src/pages/docs/elements/android-apps/supported-locator-types.md +++ b/src/pages/docs/elements/android-apps/supported-locator-types.md @@ -9,19 +9,20 @@ warning: false --- -When creating elements for an application, you need to provide a way to uniquely identify them. Testsigma supports five ways to uniquely identify or locate these elements for your automated tests. The five supported locator types are: +When creating elements for an application, you need to provide a way to identify them uniquely. Testsigma supports five ways to identify or locate these elements for your automated tests uniquely. The five supported locator types are: + +1. **Accessibility ID:** This is the most preferred locator to use to automate your tests, as this attribute would remain the same for other platforms like iOS, too, and makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. + +2. **ID:** After accessibility ID, this is the second preferred locator. Every element is supposed to have a unique ID. -1. **Accessibility ID:** This is the most preferred locator to use to automate your tests, as this is an attribute that would remain the same for other platforms like iOS too, and makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. -2. **ID:** After accessibility ID, this is the second preferred locator to use. Every element is supposed to have a unique ID. [[info | NOTE:]] | If you are facing difficulty finding IDs for your elements, you should talk to your developer about it. -1. **XPATH:** XPath stands for XML Path Language, and will parse the source code to get the value of the referred element. -2. **Class Name:** This will be the value assigned to the attribute ‘Class Name’ for the element you want to capture. -3. **Name:** This will be the value assigned to the attribute ‘Name’ for the element you want to capture. -
+3. **XPATH:** XPath stands for XML Path Language and will parse the source code to get the value of the referred element. + +4. **Class Name:** This will be the value assigned to the attribute **Class Name** for the element you want to capture. + +5. **Name:** This will be the value assigned to the attribute **Name** for the element you want to capture. -To know how these can be used while creating elements in Testsigma, please refer to the documents below: -1. [Manual Creation of Elements](https://testsigma.com/docs/elements/android-apps/create-manually/) -2. [Create an element via the mobile test recorder](https://testsigma.com/docs/elements/android-apps/capture-single-element/) +--- \ No newline at end of file diff --git a/src/pages/docs/elements/desktop-windows/record-elements.md b/src/pages/docs/elements/desktop-windows/record-elements.md index d79c3a12..1bf89de6 100644 --- a/src/pages/docs/elements/desktop-windows/record-elements.md +++ b/src/pages/docs/elements/desktop-windows/record-elements.md @@ -1,5 +1,5 @@ --- -title: "Recording elements" +title: "Recording Elements for Desktop Windows" metadesc: "Learn how to record one element at a time by using the Testsigma mobile inspector for a dekstop application project in Testsigma application." noindex: false order: 6.51 @@ -15,38 +15,51 @@ contextual_links: name: "Steps to record an element" url: "#steps-to-record-an-element" --- + --- -

-To add a new UI element to your Desktop Windows project you can create it manually or record each element using Testsigma's Element inspector. This article discusses on how to record a UI element of your desktop application.

+To add a new UI element to your Desktop Windows project you can create it manually or record each element using Testsigma's test recorder. This article discusses on how to record a UI element of your desktop application. + +--- + ## **Prerequisites** -
    -
  1. -You should have an Desktop Windows project in Testsigma. For more information refer to creating a project.
  2. -
  3. Your applications .exe file should be installed on your local machine.
  4. -
  5. Install Testsigma local agent. For more information refer to installing Testsigma local agent on Windows
  6. -
-
- - -## **Steps to record an element** - -
    -
  1. Navigate to Test development > Elements -
  2. -
  3. Click Record.
  4. -
  5. On the Record element window, -
      -
    1. Select the agent from the drop-down list.
    2. -
    3. Provide the executable file path of your desktop application.
    4. -
    5. Click Record.
    6. -
    -
  6. -This launches the Element inspector and the workflow would look something like the below: -recording elements for desktop windows -
-The all recorded elements are listed in the All elements page. -all elements \ No newline at end of file +- You should know how to create Desktop Windows [project](https://testsigma.com/docs/projects/overview/) in Testsigma. + +- You should have **.exe** file installed on your local machine.. + +- You should have [Testsigma local agent](https://testsigma.com/docs/agent/setup-on-windows-mac-linux/) installed . + +--- + +## **Steps to Record an Element** + +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/dwenav.png) + + +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/dwecor.png) + + +3. On **Record elements** overlay, select **Test Lab**, **Test Machine** and provide **App path**. +![Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/dweed.png) + + +4. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/dweconr.png) + + +5. This will open element inspector. + + +6. Record the elements and stop the recorder to close the session. + + +7. The element will be saved in the elements list. +![Recorded Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/dweseiel.png) + + +--- \ No newline at end of file diff --git a/src/pages/docs/elements/dynamic-elements/with-environment-data.md b/src/pages/docs/elements/dynamic-elements/with-environment-data.md index 75b833b4..3e6c4a59 100644 --- a/src/pages/docs/elements/dynamic-elements/with-environment-data.md +++ b/src/pages/docs/elements/dynamic-elements/with-environment-data.md @@ -2,7 +2,7 @@ title: "Using Environment Test Data for Dynamic locators" metadesc: "Leanr how to use Environment parameters for creating dynamic locator values in Elements. Automate the testing of dynamic elements in Testsigma application." noindex: false -order: 6.63 +order: 6.83 page_id: "Using Environment Test Data for Dynamic locators" warning: false contextual_links: diff --git a/src/pages/docs/elements/dynamic-elements/with-parameter-test-data.md b/src/pages/docs/elements/dynamic-elements/with-parameter-test-data.md index 7b16205b..775ba990 100644 --- a/src/pages/docs/elements/dynamic-elements/with-parameter-test-data.md +++ b/src/pages/docs/elements/dynamic-elements/with-parameter-test-data.md @@ -2,7 +2,7 @@ title: "Using Parameter Test Data for Dynamic locators" metadesc: "This article discusses the usage of Parameter Test Data for creating dynamic locators to use in Data-driven Testing | Learn about Parameter Test Data" noindex: false -order: 6.61 +order: 6.81 page_id: "Using Parameter Test Data for Dynamic locators" warning: false contextual_links: diff --git a/src/pages/docs/elements/dynamic-elements/with-runtime-test-data.md b/src/pages/docs/elements/dynamic-elements/with-runtime-test-data.md index 6dc10a0b..d6321b56 100644 --- a/src/pages/docs/elements/dynamic-elements/with-runtime-test-data.md +++ b/src/pages/docs/elements/dynamic-elements/with-runtime-test-data.md @@ -1,7 +1,7 @@ --- title: "Using Runtime Test Data for Dynamic locators" metadesc: "This article discusses the usage of Runtime Test Data for creating dynamic locators | Learn about Runtime Test Data in Testsigma application" -order: 6.62 +order: 6.82 page_id: "Using Runtime Test Data for Dynamic locators" warning: false contextual_links: diff --git a/src/pages/docs/elements/import-export.md b/src/pages/docs/elements/import-export.md index ed7cde11..bdc9c78f 100644 --- a/src/pages/docs/elements/import-export.md +++ b/src/pages/docs/elements/import-export.md @@ -2,7 +2,7 @@ title: "Import and Export Elements" metadesc: "How to import and export Elements to the Elements list | Import functionality helps to copy Elements between Application Versions within Testsigma app." noindex: false -order: 6.8 +order: 6.9 page_id: "Import and Export Elements" warning: false contextual_links: diff --git a/src/pages/docs/elements/ios-apps/capture-single-element.md b/src/pages/docs/elements/ios-apps/capture-single-element.md index 8008d6b3..6ed3643c 100644 --- a/src/pages/docs/elements/ios-apps/capture-single-element.md +++ b/src/pages/docs/elements/ios-apps/capture-single-element.md @@ -1,143 +1,145 @@ --- -title: "Create One Element at a Time (Using Mobile Inspector) for an iOS Project" +title: "Capture Single Element Using Recorder" metadesc: "Learn how to selectively capture elements one at a time by using the Testsigma mobile inspector for an iOS project in Testsigma application." noindex: false -order: 6.43 +order: 6.42 page_id: "Create One Element at a Time (Using Mobile Inspector) for an iOS Project" warning: false contextual_links: - type: section name: "Contents" - type: link - name: "Introduction" - url: "#introduction" + name: "Prerequisites" + url: "#prerequisites" - type: link - name: "Pre-requisites" - url: "#pre-requisites" + name: "Steps to Create an Element" + url: "#steps-to-create-an-element" - type: link - name: "How to create one element at a time by using the Testsigma mobile inspector for an iOS project in Testsigma" - url: "#how-to-create-one-element-at-a-time-by-using-the-testsigma-mobile-inspector-for-an-ios-project-in-testsigma" + name: "Updating an Element" + url: "#updating-an-element" - type: link - name: "Update an Element" - url: "#update-an-element" -- type: link - name: "Reusing Elements" - url: "#reusing-elements" + name: "Reusing Elements Recorded" + url: "#reusing-elements-recorded" --- --- -In an iOS project in Testsigma, you can selectively capture elements one at a time using the Test Recorder. -
+ +In an iOS project in Testsigma, you can selectively capture elements one at a time using the Testsigma recorder. This article discusses how to capture single element using recorder. --- -## **Pre-requisites** -1. You should have an iOS project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). -2. Your iOS applications’ apk should be uploaded in Testsigma so that the Test recorder can record elements from it. See [uploading apps to Testsigma](https://testsigma.com/docs/uploads/upload-apps/). -
+## **Prerequisites** + +- You should know how to create an iOS [project](https://testsigma.com/docs/projects/overview/) in Testsigma. + +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). + +- An iOS app to test. --- -## **How to create one element at a time by using the Test recorder for an iOS project in Testsigma** -1. On the ‘All Elements’ page, click on the ‘Create’ button on the top right corner of the page: -![create button on elements page under create one element at a time for an iOS project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/capture-single-element/create-button-create-one-element-ios-testsigma.png) -2. On the ‘Create Element’ layover that appears, select the option ‘Element Inspector’: -![element inspector radio button on create element layover under create one element at a time for an iOS project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/capture-single-element/element-inspector-radio-button-create-one-element-ios-testsigma.png) +## **Steps to Create an Element** +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecnav.png) -3. Now select the lab, version, device, and the .ipa you want to capture the element from, and then click on the button ‘Launch’. This launches the Test recorder which should look something like this: -![Single Element Recorder Interface in iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/capture-single-element/ios-single-element-recorder-interface.png) -4. Make sure that the "Select Element" Button, using the button highlighted below: -![Select Element Button in Element recorder interface](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/capture-single-element/ios-single-element-recorder-interface-select-button.png) +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccor.png) -5. Now click on the element that you want to capture. On the element form that opens up, enter the ‘element name’ and ‘screen name’. You can also change the element type according to your preference in this form: -![Element Form in Element Recorder Interface](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/capture-single-element/ios-single-element-recorder-interface-element-form.png) +3. On **Record elements** overlay, select **Test Lab**, **Test Machine**, **Upload App Source** and click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecsdtls.png) -6. Once you enter the required details in the element form, click on the button ‘Save & Close’. The element will be saved in the project’s element list and the Test recorder will be closed. -You can also [capture multiple elements at once via Test recorder](https://testsigma.com/docs/elements/ios-apps/record-multiple-elements/). +4. Wait for the app to load fully. ---- +5. Once the app is loaded, click on element you want to capture. +![Element to Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccoelm.png) + -## **Update an Element** -1. Create a Test Case using Test Recorder in your iOS Project. - -2. On the Test Recorder UI, hover over the step that has the element you want to edit. The elements appear in green on the Testsigma Mobile Test Recorder UI: +6. On the **Create Element** section, enter the **Name**, **Screen Name**, select the **Element Type**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseced.png) -![Highlighted example elements in Testsigma Recorder for iOS](https://docs.testsigma.com/images/update-elements/highlighted-example-elements-ios-testsigma-mobile-inspector.png) +7. Click on **Create**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccocrte.png) -3. Click on the ‘More Details’ button corresponding to the step that you want to edit. The button corresponding to the step is highlighted in the screenshot below: -![more details button for a test step in an iOS Project in Testsigma while using the Recorder](https://docs.testsigma.com/images/update-elements/more-details-button-for-a-test-step-ios-testsigma-mobile-inspector.png) +8. The element will be saved in the elements list. +![Saved](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecsaved.png) -4. Click on ‘More details’ button: +9. Stop the recorder to close the session. -![test step details for an iOS test case on Testsigma Mobile Inspector UI](https://docs.testsigma.com/images/update-elements/test-step-details-testsigma-mobile-inspector-ios.png) -5. Click on the edit button corresponding to the element on the Test Step Details: +### **Creating an Element While Creating Test Case** -![edit element button on test step details section for Testsigma Recorder for iOS](https://docs.testsigma.com/images/update-elements/edit-element-button-test-step-details-testsigma-mobile-inspector-ios.png) +Alternatively, you can also create the element while creating test case by following the steps below. +1. Hover over the element on the test step and click on **Create Element** from the dropdown. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioecitc.png) -![edit element UI from test step details section on the Recorder UI for an iOS project in Testsigma](https://docs.testsigma.com/images/update-elements/edit-element-ui-from-test-step-details-mobile-inspector-ios-testsigma.png) +2. On **Create Element** overlay, enter **Name**, **Screen Name**, select the **Element Type** and click on **Create Element**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosectccoce.png) -Here are the fields that appear on the ‘Edit Element’ window: +--- - **1. Name:** Text input field, you can edit the name of the Element here. - **2. Screen Name:** This is an editable field, you can edit the screen name for the UI identifier here. +## **Updating an Element** - **3. Element Type:** This is a drop-down field that has values: +1. Hover over the element and click on **Edit**. +![Edit](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuredite.png) -  a. Xpath +2. On the **Update Element** section, update the **Name**, **Screen Name**, select the **Element Type**. +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaupd.png) -  b. ID +3. Click on **Update**. +![Click on Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraauec.png) -  c. Name +### **Updating an Element While Creating Test Case** -  Class Name +Alternatively, you can also update the element while creating test case by following the steps below. -  sAccessibility ID +1. Hover over the element on the test step and click on **Edit Element**. +![Edit Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraaecwctc.png) - You can select any of these options for an identifier type. +2. On **Update Element** overlay, update the **Name**, **Screen Name**, select the **Element Type**. +![Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraauewctcup.png) - **4. Enter Value:** Here, the value should correspond to the identifier type selected. This is also an editable field. +3. Click on **Update Element** +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ceuraauelement.png) -6. Click on the ‘Update’ button to finalize the changes. --- -## **Reusing Elements** + +## **Reusing Elements Recorded** + 1. Create a test case in which you will be reusing your pre-recorded elements. - + + 2. Start recording test steps for the test case. - -3. Manually add a test step where you want to reuse elements: -![example of test steps that contain elements in an iOS project in Testsigma](https://docs.testsigma.com/images/reuse-elements/test-steps-that-contain-elements-testsigma-ios.png) -Alternatively, you can record a test step that uses an element. Given below is an example of test steps as they appear on the Recorder UI. The text in green is an element. +3. Hover over the element on the test step where you want to reuse the saved element and click on **Change Element**. +![Change Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecrece.png) + + +4. On **Elements** overlay, select the element you want to reuse. +![Reuse](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecrese.png) -![example of recorded test steps that contain elements for an ios project in Testsigma](https://docs.testsigma.com/images/reuse-elements/recorded-test-steps-that-contain-element-testsigma-ios.png) -4. Hover on the test step that you want to edit and click on the corresponding edit button. +5. Click on **Update Step** to finalize the change. +![Update Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecusre.png) -5. Click on the green text that represents ‘element’. The ‘Elements’ section appears on the Test Recorder UI, listing all pre-recorded elements in the project: -![elements screen to reuse elements in Testsigma recorder for an ios project](https://docs.testsigma.com/images/reuse-elements/elements-screen-reuse-elements-testsigma-recorder-ios.png) +[[info | **NOTE**:]] +| You can also reuse the element by following the same steps while creating a test case manually. -6. Start typing the name of the element that you want to reuse, the elements will be filtered by name. You can search the elements by name or by Screen name. - -7. From the filtered results, you can click on the element that you want to use, and the element text in your test step will be replaced by the chosen element. - -8. Click on the ‘Update’ button corresponding to the test step on the Test Recorder UI to finalize the change. --- \ No newline at end of file diff --git a/src/pages/docs/elements/ios-apps/overview.md b/src/pages/docs/elements/ios-apps/overview.md index ad8da9e2..e7c9fd6a 100644 --- a/src/pages/docs/elements/ios-apps/overview.md +++ b/src/pages/docs/elements/ios-apps/overview.md @@ -5,34 +5,53 @@ noindex: false order: 6.41 page_id: "Overview of Elements for an iOS Project" warning: false +contextual_links: +- type: section + name: "Contents" +- type: link + name: "Ways to Create Elements" + url: "#ways-to-create-elements" +- type: link + name: "Supported Locator Types" + url: "#supported-locator-types" --- --- -An element in an iOS project in Testsigma refers to an object that forms a part of the UI of the application and can be located or identified. -These elements can be captured in 2 different ways in Testsigma: +Element in an iOS project in Testsigma refers to an object that forms a part of the application's UI and can be located or identified. This article discusses an overview of elements for an iOS project. -1. **Manual creation:** Here, you manually give the details of the element to create them. See [creating elements manually](https://testsigma.com/docs/elements/ios-apps/create-manually/). -2. **Via Test recorder:** Here, you access your application’s UI via the Test recorder and inspect the elements that you want to capture. See [capturing elements using Test recorder](https://testsigma.com/docs/elements/ios-apps/capture-single-element/). +--- + +## **Ways to Create Elements** + +There are 2 different ways to create elements in Testsigma: + +1. **Manual Creation:** Here, you manually give the details of the element to create them. For more information, see [creating elements manually](https://testsigma.com/docs/elements/ios-apps/create-manually/). +2. **Using Test Recorder:** Here, you access your application’s UI using test recorder and inspect the elements that you want to capture. For more information, see [capturing elements using test recorder](https://testsigma.com/docs/elements/ios-apps/capture-single-element/). + +--- + +## **Supported Locator Types** -
+When creating elements for an application, you need to provide a way to identify them uniquely. Testsigma supports five ways to identify or locate these elements for your automated tests uniquely. The five supported locator types are: -Testsigma supports 5 locator types to identify these elements for your automated tests: -1. **Accessibility ID:** This is the most preferred locator to use to automate your iOS tests, as this is an attribute that remains the same across platforms (like iOS). That makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. -2. **ID:** After accessibility ID, this is the second preferred locator to use. Every element is supposed to have a unique ID. +1. **Accessibility ID:** This is the most preferred locator to automate your tests, as this attribute would remain the same for other platforms like iOS, too, and makes it easier to port the same tests to different platforms. This attribute is also least likely to be changed during a structural change in the source. + + +2. **ID:** After accessibility ID, this is the second preferred locator. Every element is supposed to have a unique ID. + [[info | NOTE:]] -| If you are facing difficulty finding IDs for your elements, talk to your developer about it. -1. **XPATH:** XPath stands for XML Path Language, and will parse the source code to get the value of the referred element. -2. **Class Name:** This will be the value assigned to the attribute ‘Class Name’ for the element you want to capture. -3. **Name:** This will be the value assigned to the attribute ‘Name’ for the element you want to capture. +| If you are facing difficulty finding IDs for your elements, you should talk to your developer about it. + + +3. **XPATH:** XPath stands for XML Path Language and will parse the source code to get the value of the referred element. + -
+4. **Class Name:** This will be the value assigned to the attribute **Class Name** for the element you want to capture. -These elements can be captured in 2 ways: -1. [Capture one element at one time](https://testsigma.com/docs/elements/ios-apps/capture-single-element/)
-2. [Capture multiple elements at one time](https://testsigma.com/docs/elements/ios-apps/record-multiple-elements/) -To know about the various actions that can be taken on the elements in a project in Testsigma, see [Bulk actions on elements](https://testsigma.com/docs/elements/overview/). +5. **Name:** This will be the value assigned to the attribute **Name** for the element you want to capture. +--- \ No newline at end of file diff --git a/src/pages/docs/elements/ios-apps/record-multiple-elements.md b/src/pages/docs/elements/ios-apps/record-multiple-elements.md index 222ed398..76dc0309 100644 --- a/src/pages/docs/elements/ios-apps/record-multiple-elements.md +++ b/src/pages/docs/elements/ios-apps/record-multiple-elements.md @@ -2,22 +2,18 @@ title: "Record Multiple Elements for an iOS Application" metadesc: "Elements play an important role in Automation Testsing. Learn how to record multiple elements for a iOS project in Testsigma Appication." noindex: false -order: 6.42 +order: 6.43 page_id: "Record Multiple Elements for an iOS Application" warning: false contextual_links: - type: section name: "Contents" - type: link - name: "Introduction" - url: "#introduction" + name: "Prerequisites" + url: "#prerequisites" - type: link - name: "Pre-requisites" - url: "#pre-requisites" -- type: link - name: "How to record multiple elements for an iOS project in Testsigma" - url: "#how-to-record-multiple-elements-for-an-ios-project-in-testsigma" - + name: "Steps to Create Multiple Elements" + url: "#steps-to-create-multiple-elements" --- @@ -28,42 +24,52 @@ When automating test cases for an iOS application, you may sometimes want to cap
--- -## **Pre-requisites** +## **Prerequisites** -You should already know: -1. About Projects overview. -2. Your iOS applications’ apk should be uploaded in Testsigma so that the Test recorder can record elements from it. -See uploading apps to Testsigma. +- You should know how to create an iOS [project](https://testsigma.com/docs/projects/overview/) in Testsigma. -
+- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). + +- An iOS app to test. --- -## **How to record multiple elements for an iOS project in Testsigma** -1. On the ‘All Elements’ page, click on the ‘Record’ button on the top right corner of the page: -![record button under record multiple elements for an iOS project in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/record-button-record-multiple-elements-ios-testsigma.png) +## **Steps to Create an Element** + +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecnav.png) + + +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccor.png) + + +3. On **Record elements** overlay, select **Test Lab**, **Test Machine**, **Upload App Source** and click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecsdtls.png) + + +4. Wait for the app to load fully. + -2. On the ‘Record Element’ window that appears, select the device that you want to capture the elements from. The ‘record element’ window should look something like below: -![record element window under record multiple elements for an iOS project in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/record-element-window-record-multiple-elements-ios-testsigma.png) +5. Once the app is loaded, click on element you want to capture. +![Element to Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccoelm.png) -3. Once you have selected the version, device, and the .ipa you want to launch, click on the record button on the ‘Record Element’ window. -4. The Test Recorder screen should appear like this: - ![Element recorder interface for iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/iOS-element-recorder-interface-1.png) -5. Make sure that the "Select Element" button is selected. The "Select Element" button is highlighted in the screenshot below: - ![Select Element Button in Element Recorder for iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/iOS-element-recorder-interface-select-element-button-1.png) +6. On the **Create Element** section, enter the **Name**, **Screen Name**, select the **Element Type**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseced.png) -6. Now click on the element that you want to capture. On the element form that opens up, enter the ‘element name’ and ‘screen name’. You can also change the element type according to your preference in this form: -![iOS Element Recorder Element Form](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/iOS-element-recorder-element-form-1.png) -7. Once you’ve entered the details in the element form, click ‘Done’. The captured element will appear under elements on the same screen: -![One Element Saved in Element Recorder for iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/iOS-element-recorder-one-element-saved-1.png) +7. Click on **Create**. +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioseccocrte.png) -The elements can also be edited or deleted from this list using the ‘edit’ and ‘delete’ buttons that appear at the end of the element rows. +8. The element will be saved in the elements list. +![Saved](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecsaved.png) -8. Repeat steps 6 and 7 for every element you want to capture. -9. Once you have captured the elements, click on the **Save** button on the **Elements** list to save the changes in the project. Once saved, a checkmark icon will appear corresponding to all the saved elements in the element list: +9. Once you have captured the elements, click on **Stop Recording**. +![Stop Recording](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosecsrec.png) -![Multiple Elements Saved in Element Recorder for iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/ios-apps/record-multiple-elements/iOS-element-recorder-multiple-elements-saved-1.png) +10. You'll be redirected to the **Elements** page, where you can see all recorded elements. +![All Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ioselempage.png) +--- \ No newline at end of file diff --git a/src/pages/docs/elements/mobile-web-application/create-manually.md b/src/pages/docs/elements/mobile-web-application/create-manually.md index 3c293e9e..035f326b 100644 --- a/src/pages/docs/elements/mobile-web-application/create-manually.md +++ b/src/pages/docs/elements/mobile-web-application/create-manually.md @@ -1,8 +1,8 @@ --- -title: "Create Elements [Manually]" +title: "Create Elements Manually" metadesc: "Element path plays an important role in dynamic websites. Learn how to create elements manually for a Mobile Web Application project in Testsigma." noindex: false -order: 6.92 +order: 6.62 page_id: "Create Elements for a Mobile Web Application" warning: false contextual_links: @@ -12,32 +12,50 @@ contextual_links: name: "Prerequisites" url: "#prerequisites" - type: link - name: "Steps to create Elements manually for Mobile Web Application" - url: "#steps-to-create-elements-manually-for-mobile-web-application" + name: "Steps to Create an Element" + url: "#steps-to-create-an-element" +--- + +--- + + +In dynamic websites, elements can have varying attributes/properties across sessions. In such cases, we need to create elements manually. This article discusses how to create elements manually with simple steps for a mobile web application. + + --- -
-In dynamic websites, elements can have varying attributes/properties across sessions. In such cases, we need to create elements manually. For more information, refer to [elements](https://testsigma.com/docs/elements/overview/). +## **Prerequisites** -
+- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. -## **Steps to create Elements manually for Mobile Web Application** +- A mobile web app to test. + +--- + +## **Steps to Create an Element** + +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecnavel.png) -1. Navigate to **Test Development > Elements**. 2. Click on **Create**. -![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/elementcreate.png) +![Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaeccocre.png) + 3. On **Create Element** Overlay, enter all the details: -![Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/createelementoverlay.png) +![Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecdetails.png) + - **Name:** Enter the name you want to give your element. + - **Screen Name:** Mention the screen that your element resides on. + - **Element Type:** There are 5 types of element types supported in Testsigma. This field is a drop-down list; you can select any of them: **XPATH**, **ID**, **Name**, **Class Name**, or **Accessibility ID**. + - **Enter Value:** Enter the value corresponding to the **Element Type** you selected. + + +4. Click on **Create Element**. +![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwacreateelm.png) - - **Name:** Enter the name of the Element. - - **Screen Name:** Screen Name will be helpful to group your Elements by each screen in your application. This helps you search Elements on each screen in your application. - - **Locate By:** Select the suitable locator from a drop-down box: ID, Name, XPath, CSS Selectors, link text, partial link text, class name, or tag name - - **Value:** Enter the value for the selected element type. -4. Click on **Create** to create the Element. +5. The element will be saved in the elements list. -5. Verify the Element on the Elements page. +--- \ No newline at end of file diff --git a/src/pages/docs/elements/mobile-web-application/record-elements.md b/src/pages/docs/elements/mobile-web-application/record-elements.md index 374254f2..82750ac1 100644 --- a/src/pages/docs/elements/mobile-web-application/record-elements.md +++ b/src/pages/docs/elements/mobile-web-application/record-elements.md @@ -1,8 +1,8 @@ --- -title: "Record Elements for a Mobile Web Application" +title: "Capture Elements Using Recorder" metadesc: "Element path plays an important role in Automation Testsing. Learn how to record elements for a Mobile Web Application project in Testsigma." noindex: false -order: 6.91 +order: 6.61 page_id: "Record Elements for a Mobile Web Application" warning: false contextual_links: @@ -12,46 +12,50 @@ contextual_links: name: "Prerequisites" url: "#prerequisites" - type: link - name: "Steps to Record Elements for Mobile Web Application" - url: "#steps-to-record-elements-for-mobile-web-application" + name: "Steps to Capture Elements" + url: "#steps-to-capture-elements" --- -
+--- The path of an element plays a crucial role in test automation. It specifies locating a UI element within a web page or application, such as a button, textbox, or link. This article will discuss how to capture elements with a Chrome recorder extension. +--- ## **Prerequisites** -- You should know how to create a Test Case. If not, then refer to the document [here](https://testsigma.com/docs/test-cases/manage/add-edit-delete/). +- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. + +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). -- You should have the Testsigma test step recorder chrome extension already installed. If not, then refer to the document [here](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). +- A mobile web app to test. -
+--- -## **Steps to Record Elements for Mobile Web Application** +## **Steps to Capture Elements** -1. Navigate to **Test Development > Elements**. +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecnavel.png) -2. Click on **Record**. -![Click on Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/record.png) -3. Go to a new tab and enter the **URL** in which you want to capture the element. The Testsigma test recorder will appear and will be ready to start recording. +2. Click on **Record**. +![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecrcor.png) -4. Hover over the element you want to capture and make sure that it is highlighted in green as shown in the screenshot below (here we wanted to capture the login button): -![Highlighted](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/loginhighlight.png) -5. Now click on the element and wait for the element to appear in the **Record Elements** and click on **Done**. +3. This will open a new tab. Enter the URL from which you want to capture the single element. The Testsigma test recorder will appear and will be ready to start recording. +![New Tab](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecntab.png) -![Record Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/recordelement.png) +4. Hover over the element you want to capture and make sure that it is highlighted in green. +![Highlight](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaechingren.png) -6. You will be taken back to the Elements page. +5. Click on the hovered element and wait for the element to appear in the recorder. +![Click on Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaeclb.png) -7. Verify the Element on the Elements page. -![Verify Elemet](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/verify.png) +6. Click on **Done**, you will be redirected to the **Elements** page. +![Done](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecdone.png) -Here is a quick GIF that demonstrates how to record Elements for Mobile Web Applications. +7. The element will be saved in the elements list. -![GIF to record elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/recordelementgif.gif) +--- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/capture-single-element.md b/src/pages/docs/elements/web-apps/capture-single-element.md index 51925c38..392589b5 100644 --- a/src/pages/docs/elements/web-apps/capture-single-element.md +++ b/src/pages/docs/elements/web-apps/capture-single-element.md @@ -12,77 +12,76 @@ contextual_links: name: "Prerequisites" url: "#prerequisites" - type: link - name: "Steps to Create an Element From the Elements Page" - url: "#steps-to-create-an-element-from-the-elements-page" + name: "Steps to Capture an Element" + url: "#steps-to-capture-an-element" - type: link - name: "Steps to Create an Element From the Test Case Creation Page" - url: "#steps-to-create-an-element-from-the-test-case-creation-page" + name: "Creating an Element While Creating Test Case" + url: "#creating-an-element-while-creating-test-case" - type: link name: "Steps to Create an Element From the Test Case Result Page" url: "#steps-to-create-an-element-from-the-test-case-result-page" - type: link - name: "Updating elements via Test recorder" - url: "#updating-elements-via-test-recorder" + name: "Updating Elements Using Recorder" + url: "#updating-elements-using-recorder" - type: link - name: "Reusing elements recorded" + name: "Reusing Elements Recorded" url: "#reusing-elements-recorded" --- --- -Sometimes while creating tests, we only need to capture the details of a single Element. You can employ the following methods to capture the single element. -1. Create an element from the Elements page. -2. Create an element while creating a test case. -3. Create an element from a test case result. - -This article discusses all 3 ways to capture a single element. +In a Web project in Testsigma, you can selectively capture elements one at a time using the Testsigma recorder. This article discusses how to capture single element using recorder. --- ## **Prerequisites** -- You should have a web application project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). -- You should have Testsigma Recorder Extension. See [install chrome extension](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). -- You should also know how to [create a test case](https://testsigma.com/docs/test-cases/manage/add-edit-delete/) and [test executions](https://testsigma.com/docs/runs/test-plan-executions/). + +- You should know how to create an web [project](https://testsigma.com/docs/projects/overview/) in Testsigma. + +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). + +- A Web app to test. --- -## **Steps to Create an Element From the Elements Page** +## **Steps to Capture an Element** + 1. Navigate to **Create Tests > Elements**. ![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielelements.png) -2. Click on **Create Element**. -![Create Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielcoce.png) - -3. On **Create Element** overlay, click on **Record Element**. -![Record Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielcoce.png) +2. Click on **Record**. +![Record Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waeccorec.png) -4. Open the new tab and enter the URL from which you want to capture the single element. The Testsigma test recorder will appear and will be ready to start recording. Here, we opened a new tab and entered the URL for Simply Travel. +3. This will open a new tab. Enter the URL from which you want to capture the single element. The Testsigma test recorder will appear and will be ready to start recording. Here, we opened a new tab and entered the URL for Simply Travel. ![New Tab](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielstweb.png) -5. Hover over the element you want to capture and make sure that it is highlighted in green (here we are capturing the username field): +4. Hover over the element you want to capture and make sure that it is highlighted in green (here we are capturing the username field): ![Element to Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielungreen.png) -6. Click on the hovered element and wait for the element to appear in the recorder. +5. Click on the hovered element and wait for the element to appear in the recorder. ![Element in Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielwfrta.png) -7. Click on **Capture**, you will be redirected to the **Elements** page. +6. Click on **Capture**, you will be redirected to the **Elements** page. ![Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielcocapture.png) -8. Check all the options and click on **Create Element**. +7. Check all the options and click on **Create Element**. ![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielcsdcoc.png) -Here’s a quick GIF demonstrating how to create an element from the Elements page. +Here’s a quick GIF demonstrating how to create an element from the **Elements** page. ![Element from Elements page](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/CreateSingleElemWF.gif) --- -## **Steps to Create an Element From the Test Case Creation Page** +## **Creating an Element While Creating Test Case** + 1. Navigate to **Create Tests > Test Cases**, create a new test case or select an existing test case. ![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sieltcsstc.png) + 2. Click on **Create Element**. ![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielcocelemftc.png) + 3. Follow the steps 3-8, mentioned in **steps to create an element from the elements page** to create an element. @@ -90,17 +89,22 @@ Here’s a quick GIF demonstrating how to create an element from the Elements pa --- ## **Steps to Create an Element From the Test Case Result Page** + 1. Navigate to **Run Results** and click on the run result you want to edit. ![Run Result](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielrr.png) + 2. On the **Run Results Details** page, click on the test case result in which you want to edit the element. ![Details](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielstcr.png) + 3. Click the test step in which you want to edit the element and hover over the test step details on the right side of the page and click on edit. ![Edit Icon](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielclickineicon.png) + 4. You’ll get an **Update Element** overlay. + 5. Click on **Record Element** to capture a new element. *Refer to steps 3-8 from creating an element from the elements section for detailed information*. ![Update Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielements.png) @@ -108,60 +112,46 @@ Here’s a quick GIF demonstrating how to create an element from the Elements pa --- -## **Updating elements via Test recorder** +## **Updating Elements Using Recorder** - 1. Create a Test Case using the Test recorder. - 2. Click on the element/Elements that you want to edit. The Elements appear in green on the Test recorder UI. -![Highlighted example Elements in Test recorder](https://docs.testsigma.com/images/update-elements/highlighted-example-Elements-testsigma-recorder.png) +1. Navigate to **Create Tests > Elements** and create a test case using the recorder. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/mwaecnavel.png) - 3. Click ‘edit Elements’ from the three dots on the far right -![Multiple options on the edit Elements screen window in Test recorder](https://docs.testsigma.com/images/update-elements/edit-Element-screen-multiple-options-testsigma-recorder.png) +2. Hover over the element you want to update and click on **Edit Element**. +![Edit](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecee.png) -These are the fields that will appear: - * **Name** - * **Screen Name** - * **Identifier Type**: This is a drop-down field that has values: - 1. Xpath - 2. CSS Selector - 3. ID - 4. Name - 5. Link Text - 6. Partial Link Text - 7. Class Name - 8. Tag Name +3. On the **Update Element** overlay, you can update the **Element Name**, **Screen Name**, select the **Element Type & Location**. +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecueol.png) -You can select any of these options for identifier type. - * **Enter Value**: Here, the value should correspond to the identifier type selected. - * **View details**: Once you click on this, you will be able to see more details about the Elements. -Click ‘Update’ button to finalize the changes. +4. Click on **Update** to finalize the changes. +![Update](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecueur.png) --- ## **Reusing Elements Recorded** - 1. Create a new test case in the same Project. - 2. Start recording the test steps. - 3. Add a test step as follows: +1. Create a test case in which you will be reusing your pre-recorded elements. + + +2. Start recording test steps for the test case. -![example of test steps that contain Element in Testsigma](https://docs.testsigma.com/images/reuse-elements/test-steps-that-contain-Element-testsigma.png) +3. Hover over the element on the test step where you want to reuse the saved element and click on **Change Element**. +![Change Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecchangeelm.png) -You can also record a test step that uses an Element. -![example of recorded test steps that contain Elements in Testsigma](https://docs.testsigma.com/images/reuse-elements/recorded-test-steps-that-contain-Element-testsigma.png) +4. On **Elements** overlay, select the element you want to reuse. +![Reuse](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecselm.png) - 4. Hover on the test step that you want to edit and click on the corresponding edit button. - 5. Click on the green text that says ‘Element’. The ‘Elements’ page appears on the Test recorder UI. This will have all the Elements in the project: -![Elements screen to reuse elements in Testsigma recorder](https://docs.testsigma.com/images/reuse-elements/Elements-screen-reuse-elements-testsigma-recorder.png) +5. The element will be automatically updated. - 6. Start typing the name of the Element that you want to use. The Elements can be filtered by name. You can also search the identifiers by name or by Screen name. - 7. From the filtered results, you can click on the Element that you want to use, and the Element text in your test step will be replaced by the chosen Element. - 8. Click on ‘Update’ button corresponding to the test step on the Test recorder UI to finalize the change. +[[info | **NOTE**:]] +| You can also reuse the element by following the same steps while creating a test case manually. --- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/create-manually.md b/src/pages/docs/elements/web-apps/create-manually.md index 0ca91ebd..889c3a31 100644 --- a/src/pages/docs/elements/web-apps/create-manually.md +++ b/src/pages/docs/elements/web-apps/create-manually.md @@ -9,8 +9,8 @@ contextual_links: - type: section name: "Contents" - type: link - name: "Why Create Elements Manually" - url: "#why-create-elements-manually" + name: "Prerequisites" + url: "#prerequisites" - type: link name: "Creating Element Manually" url: "#creating-element-manually" @@ -27,130 +27,110 @@ contextual_links: --- -We assume you are familiar with Elements[(?)](https://testsigma.com/docs/elements/overview/) and how to create them using the Testsigma test Recorder[(?)](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/).
-If not, please refer: [Create an Element using test Recorder](https://testsigma.com/docs/elements/web-apps/record-multiple-elements/). - -If you are not familiar with XPaths or CSS Selectors, please use the Testsigma test Recorder to get the Elements easily. +For dynamic websites such as E-commerce websites, the elements might be dynamic in nature i.e none of their attributes/properties remain constant across sessions. In such cases, there are chances for the elements created using Testsigma test Recorder to fail. In those specific cases, we might need to create some of the elements manually. [[info | NOTE:]] | This guide is intended for Advanced Users. Familiarity with Elements, XPath and CSS Selectors is recommended for this guide. - --- -## **Why Create Elements Manually** -For dynamic websites such as E-commerce websites, the elements might be dynamic in nature i.e none of their attributes/properties remain constant across sessions. In such cases, there are chances for the Elements created using Testsigma test Recorder to fail. In those specific cases, we might need to create some of the Elements manually. +## **Prerequisites** +- You should know how to create an android [project](https://testsigma.com/docs/projects/overview/) in Testsigma. ---- +- A Web app to test. -## **Creating Element Manually** +--- -Navigate to **Test Development > Elements** to get to the Elements page: +## **Steps to Create an Element** -![Elements-List](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/web-apps/create-manually/Elements-List.png) -Clicking on the Create button on the top right corner opens the Create Element page as shown below: +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielelements.png) -![Create Elements manually ](https://docs.testsigma.com/images/create-manually/element-create-manually.png) +2. Click on **Create**. +![Create Elemenet](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecmcelm.png) -Enter the details as mentioned below:
- **Name:** Enter the name that is used for Element.
- **Screen Name:** Screen Name will be helpful to group your Elements by each screen in your application. This helps you search Elements on each screen in your application.
- **Element Type:** Select the suitable locator from a drop-down box: **ID, Name, XPath, CSS Selectors, link text, partial link text, class name, or tag name**
- **Value:** Enter the value for the selected element type. To know more about creating different types of locators, refer to: [Different strategies for formulating Elements](https://testsigma.com/docs/elements/web-apps/creating-locators-manually-strategies/) -If you would like to know more about creating dynamic locators, refer: [Dynamic elements with Parameter Test Data](https://testsigma.com/docs/elements/dynamic-elements/with-parameter-test-data/) +3. On **Create Element** overlay, you'll see the following fields: +![Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waeceoverlay.png) + - **Name:** Enter the name you want to give your element. + - **Screen Name:** Mention the screen that your element resides on. + - **Element Type:** There are 5 types of element types supported in Testsigma. This field is a drop-down list; you can select any of them: **XPATH**, **ID**, **Name**, **Class Name**, or **Accessibility ID**. + - **Enter Value:** Enter the value corresponding to the **Element Type** you selected. -After entering the values, click on the Create button to create the Element. +4. Once you have added all the details, click on **Create element**. +![Click on Create](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecedce.png) ---- -## **Creating Element While Adding Test Steps** - 1. Create a new test case or go to an existing test case. - 2. Add a test step to the test case. The language for the test step should contain an Element. For inspiration, check the screenshot below: +5. The element will be saved in the elements list. -![the various Actions test steps in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-various-Actions-test-steps-in-testsigma.png) +[[info | **NOTE**:]] +| You can also create elements using the recorder by clicking on **Record Element** from the **Create Element** page. +| ![Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecreccce.png) - 3. Let’s say we added the step ‘Click on element’ to our test case. After addition, the step looks like this: -![Element specific test step test case page in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-element-specific-test-step-test-case-page-testsigma.jpg) +--- - 4. On the step, click on the green text ‘Element’, a layover will appear containing the Elements in the project, as shown in the screenshot below: -![Elements layover over a test case page in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-elements-layover-over-test-case-page-testsigma.png) +## **Creating Element While Adding Test Steps** - 5. Here,if you want to create an element that is not added already, then you can start typing a new name for it: the option “NEW” will appear as also shown in the screenshot below: -![add new identifier with a new name on test case page in Testsigma](https://docs.testsigma.com/images/create-a-new-element/add-new-identifier-with-the-new-name-test-case-page-testsigma.png) +1. Navigate to **Create Tests > Test Cases**, click on **Create Test Case** or go to a pre-existing test case. +![Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waectcca.png) - 6. Now click on the ‘NEW’ button highlighted in the last step. ‘Create Element’ form will open up as shown in the screenshot below: -![create Element form on test case page in Testsigma](https://docs.testsigma.com/images/create-a-new-element/the-create-element-form-on-test-case-page-in-testsigma.png) +2. Add a test step to the test case that contains an element. - 7. Here, you can create the Element either manually or via test recorder. To proceed with creating the Element manually, select ‘Manually’. - If you want to create elements in less than half the time, capture them using Testsigma’s test recorder. Read more about it [here](https://testsigma.com/docs/elements/web-apps/capture-single-element/). +3. Hover over the ***element*** and select **Create Element** from the dropdown. +![Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waectcc.png) - Here’s how to create the Element manually: - 8. Once you select ‘Manually’, you will see the form options as shown in the screenshot below: +Follow the steps 3-5 from above section to create an element manually. -![create Element form in Testsigma with Manually radio button selected](https://docs.testsigma.com/images/create-a-new-element/create-Element-manually-testsigma.png) -  +--- +## **Updating an Element** -Fill the fields you see: - 1. **Name**: Element name - 2. **Screen Name**: Screen that your element resides on. - 3. **Identifier Type**: There are 5 types of identifier types supported in Testsigma, this field is a drop-down list, you can select any one of them: XPATH, CSS Selector, ID, Name or Link Text +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecue.png) -![identifier type dropdown values on the create Element form in Testsigma](https://docs.testsigma.com/images/create-a-new-element/identifier-type-dropdown-value-create-Element-testsigma.png) - 4. **Enter Value**: Enter the value here that is in correspondence with the Identifier Type you selected. - -  +2. Hover over the element you want to update and click on the **kebab menu** to open a dropdown menu. Click on **Edit** from the dropdown. +![Edit](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waeckmue.png) - Once you have added all the details, click on the ‘CREATE’ button and your created element will be replaced in the test step you were creating. ---- +3. On the **Update Element** overlay, you can update the **Name**, **Screen Name**, select the **Element Type**. +![Update Element Details](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecueev.png) -## **Updating an Element** - 1. To update an element, go to **Test Development > Elements** - 2. **All UI identifiers** page will appear that contains all the elements in the selected project: +1. Click on **Update**. +![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecupovrl.png) -![all-UI-identifiers-page-to-update-elements-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/web-apps/update-elements/all-UI-identifiers-page-to-update-elements-in-Testsigma.png) - 3. Go to the element that you want to update. If there are too many to find the right one, try filtering the elements. - 4. Hover over the element and click on the **Edit** button. +--- -![edit button for an element in all UI identifiers page in Testsigma](https://docs.testsigma.com/images/update-elements/edit-button-for-an-element-in-all-ui-identifiers-testsigma.png) +## **Updating Multiple Elements** - 5. An Edit Elements layover opens as shown in the screenshot below: -![edit-UI-identifier-page-to-update-elements-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/web-apps/update-elements/edit-UI-identifier-page-to-update-elements-in-Testsigma.png) -Edit the element and click on **Update** to save the changes. +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecue.png) -  ---- -## **Updating Multiple Elements** +2. Click on **Export** to download an XLSX file containing all elements from the project. +![Export](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecbuexp.png) - 1. Go to **Test Development > Elements** - 2. On the top right, there is an option to export the elements in excel format. Click it: -![export-button-on-UI-identifier-page-to-update-elements-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/web-apps/update-elements/export-button-on-UI-identifier-page-to-update-elements-in-Testsigma.png) +3. In the downloaded XLSX file, update the required fields for the required elements. - 3. On your workstation, update the excel sheet. Save the changes and close the file. - 4. In Testsigma, click on the import button and upload the saved file from the previous step. -![import-button-on-UI-identifier-page-to-update-elements-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/create-steps-nl/web-apps/update-elements/import-button-on-UI-identifier-page-to-update-elements-in-Testsigma.png) +4. Click on **Import** and choose the updated XLSX file for import. +![Import](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cemimpelem.png) -This way, you can bulk edit element information. The changes will be visible in the corresponding elements in Testsigma. --- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/creating-locators-manually-strategies.md b/src/pages/docs/elements/web-apps/creating-locators-manually-strategies.md index 10dbb1d6..671fa6d5 100644 --- a/src/pages/docs/elements/web-apps/creating-locators-manually-strategies.md +++ b/src/pages/docs/elements/web-apps/creating-locators-manually-strategies.md @@ -1,5 +1,5 @@ --- -title: "Different strategies for formulating Elements" +title: "Strategies for Formulating Elements" metadesc: "Learn how to find and create locators for the Elements using single attributes, text, or Xpath and CSS Selectors in Testsigma Application" noindex: false order: 6.26 @@ -30,11 +30,7 @@ contextual_links: --- -For this guide, it would be recommended to get familiar with the Chrome Developer Tools and Elements Panel for finding the Elements and their attributes. - -External Link: [Get Started With Viewing And Changing The DOM](https://developer.chrome.com/docs/devtools/dom/) - -We will be primarily talking about creating the Element locators manually. For an easier method, refer: [Create Element using test Recorder](https://testsigma.com/docs/elements/web-apps/record-multiple-elements/) +For this guide, it would be recommended to get familiar with the Chrome Developer Tools and Elements Panel for finding the Elements and their attributes. For more information, see [getting started with viewing and changing the DOM](https://developer.chrome.com/docs/devtools/dom/). Elements can be created from the attributes/properties of an HTML Element, using: 1. Attributes of the element like id, name, placeholder @@ -44,35 +40,36 @@ Elements can be created from the attributes/properties of an HTML Element, using
--- -##**1. Using unique single Element Attributes** +## **1. Using Unique Single Element Attributes** You can use any of the element attributes such as ID, Name, Class Name, etc if their value is unique. ID locator is the most preferred and recommended single attribute. Check the below section “Get Locators value manually using Chrome Developer Tools” to learn how to use Chrome Developer Tools to get the attribute value. -
--- -##**2. Using Link Text and Partial Link Text** + +## **2. Using Link Text and Partial Link Text** You can use the visible text(fully or partially) on a link(anchor tag) for formulating Elements. Check the below section “Get Locators value manually using Chrome Developer Tools” to learn how to use Chrome Developer Tools to get the link text. -
+ --- -##**3. Using XPath/CSS Selectors** + +## **3. Using XPath/CSS Selectors** You can generate XPath/ CSS Selectors for elements using Chrome Developer tools if you are familiar with XPath/CSS Selector creation. Check the below section “Get Locators value manually using Chrome Developer Tools” to learn how to use Chrome Developer Tools to get the XPath or CSS Selector. -
- --- -##**Get Locators value manually using Chrome Developer Tools** + +## **Get Locators value manually using Chrome Developer Tools** + For demonstration, we will take the example of a simple Login button on the [OrangeHRM Login page](http://opensource.demo.orangehrmlive.com/). We will try to get the Attribute values for the Login button below: 1. Navigate to the page in your Google Chrome Browser. @@ -93,17 +90,18 @@ The general format of HTML code for a HTML Page Element is:
This is the code for the LOGIN button on above OrangeHRM Web page.
< input type = "submit" name="Submit" class="button" id="btnLogin" value="LOGIN"> -
+ --- -##**Finding Element attributes and their values** + +## **Finding Element attributes and their values** In this case, the tag name is ‘input’. Attribute names are ‘type’, ‘name’, ‘class’, ‘id’, and ‘value’ and their respective values are the strings in quotes following their name and equal sign. For example, the value of the ‘name’ attribute is ‘Submit’. Similarly, you can find the attribute values for ID, Class, etc -
--- -##**Find XPath or CSS Locator** + +## **Find XPath or CSS Locator** In the Elements panel, right-click on the highlighted element, hover over the Copy option, and select ‘Copy XPath’ or ‘Copy Selector’ from the popup menu. @@ -112,11 +110,4 @@ In the Elements panel, right-click on the highlighted element, hover over the Co Your Xpath or CSS Locator will be copied to the clipboard. - - - - - - - - +--- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/iframe-elements.md b/src/pages/docs/elements/web-apps/iframe-elements.md index 6a7ca7b3..8a41274d 100644 --- a/src/pages/docs/elements/web-apps/iframe-elements.md +++ b/src/pages/docs/elements/web-apps/iframe-elements.md @@ -1,5 +1,5 @@ --- -title: "How to Handle iframe Elements?" +title: "Handling iframe Elements?" metadesc: "While creating test cases for web apps that involve iframes, it is important to understand them. Learn how to effectively handle iframe elements in Testsigma" noindex: false order: 6.29 @@ -9,8 +9,8 @@ contextual_links: - type: section name: "Contents" - type: link - name: "Pre-requisites" - url: "#pre-requisites" + name: "Prerequisites" + url: "#prerequisites" - type: link name: "Best Practices While Using iframe Elements in Test Cases" url: "#best-practices-while-using-iframe-elements-in-test-cases" @@ -19,10 +19,14 @@ contextual_links: --- + While writing test cases for web applications that involve iframes, it is important to understand them clearly. In this article, we will discuss how to handle iframe elements that are captured using the recorder. + --- -## **Pre-requisites** + +## **Prerequisites** + 1. You should have an web application project in Testsigma. See [creating a project](https://testsigma.com/docs/projects/overview/). @@ -34,16 +38,15 @@ While writing test cases for web applications that involve iframes, it is import ## **Best Practices While Using iframe Elements in Test Cases** 1. When you capture iframe elements using Testsigma recorder, there is no need to use the NLP ***switch to the frame*** since the recorder automatically captures the iframe details. The test case will work without using the NLP. +![NLP](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/hife.png) -![NLP](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/switch.png) 2. If we use the NLP ***switch to the frame***, we should edit all the iframe elements and uncheck the option ***present inside nested content*** to make the test case work. +![Edit Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/hifeuelem.png) -![Edit Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/editelement2.png) [[info | **NOTE**:]] -|If you enable the Present inside nested content option while already inside an iframe, it will result in test failure since it starts searching for nested iframes. - - +| If you enable the Present inside nested content option while already inside an iframe, it will result in test failure since it starts searching for nested iframes. +--- diff --git a/src/pages/docs/elements/web-apps/overview.md b/src/pages/docs/elements/web-apps/overview.md index d36a270f..967e2c9b 100644 --- a/src/pages/docs/elements/web-apps/overview.md +++ b/src/pages/docs/elements/web-apps/overview.md @@ -1,5 +1,5 @@ --- -title: "Overview of Elements for a Web Project" +title: "Elements for a Web Project (Overview)" metadesc: "Elements for a web project are needed to direct the interactions of UI. Here's an overview of Elements for a web project in Testsigma. " noindex: false order: 6.21 @@ -9,108 +9,70 @@ contextual_links: - type: section name: "Contents" - type: link - name: "Creating Elements" - url: "#creating-elements" + name: "Ways to Create Elements" + url: "#ways-to-create-elements" - type: link - name: "Filter Elements " - url: "#filter-elements" + name: "Actions on Elements Page" + url: "#actions-on-elements-page" - type: link name: "Element Review Management" url: "#element-review-management" -- type: link - name: "Dynamic Elements with Test Data" - url: "#dynamic-elements-with-test-data" --- --- -**Elements** in Testsigma represent the locators for the actual elements on your Web Pages or App Screens. These are needed to direct the interactions as Test Steps. - -On the below page - Full name, Email-id, Age Group, Gender, etc. are all elements in the web page. - -![alt text](https://docs.testsigma.com/images/web-apps/sample-elements.png) +Elements in web applications refer to components that make up the content and structure of a web page. They represent different types of content, such as text, images, links, forms, and more. In order to interact with any of these elements on the page, we have to create an element in Testsigma Elements Repository. This article discusses an overview of elements for a Web project. -In order to interact with any of these elements on the page, we have to create an Element in Testsigma Elements Repository. -An element, in Testsigma Elements Repository, contains details that identify and locate those elements on the page. These can be a combination of HTML attributes and their parent, child, or sibling relationships with other elements on the page. - -We will be using an Element’s name in the Test Steps while writing Test Cases. - -
--- -## **Creating Elements** -We can [create multiple Elements using Testsigma test Recorder](https://testsigma.com/docs/elements/web-apps/record-multiple-elements/) which is the easiest and recommended way. Creating all the Elements in advance helps you to speed up the Test Case creation process. +## **Ways to Create Elements** -We can also [create a single Element using Testsigma test Recorder](https://testsigma.com/docs/elements/web-apps/capture-single-element/) -Otherwise, if you are comfortable with XPaths and CSS Selectors, you can [create the Element manually](https://testsigma.com/docs/elements/web-apps/create-manually/) using the HTML attributes/properties. +There are 2 different ways to create elements in Testsigma: -The following actions can be done from the Elements list: -* Affected List -* Sort the Elements -* Import/Export Elements: Read more about it in the document [here](https://testsigma.com/docs/elements/import-export/). -* Filter the Elements -* Bulk Delete the elements +1. **Manual Creation:** Here, you manually give the details of the element to create them. For more information, see [creating elements manually](https://testsigma.com/docs/elements/web-apps/create-manually/). -Let’s discuss more details about element actions affected list, sort and filter below: -1. **Affected List:** The affected List button in the Elements list shows the Test Cases that are affected by modification on the corresponding element. -The Test Suites and the Test Plans containing these Test Cases can also be viewed from this page. -2. **Sort the Elements:** The Elements list can be sorted on the basis of Name, Created Date and Update Date in ascending or descending order +2. **Using Test Recorder:** Here, you access your application’s UI using test recorder and inspect the elements that you want to capture. For more information, see [capturing elements using test recorder](https://testsigma.com/docs/elements/web-apps/capture-single-element/). -![Sort-Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/web-apps/overview/Sort-Elements.png) --- -## **Filter Elements** -To filter Elements, click on the Filter icon on the top left corner of the Elements List page. In the overlay that opens up, you can see the following options for filtering the Elements: - -* Name -* Type -* Screen name -* Created By -* Created Date -* Updated Date -* Value -* Labels -* Usage in Test Case -![Element-List-Filters-overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/web-apps/overview/Element-List-Filters-overlay.png) +## **Actions on Elements Page** -* Name: Filter the Elements by their Name. This can be used to search Elements by name as well. -* Type: Filter the Elements on the basis of locator type -* Screen name: Filter by Screen name of the Element -* Created By: Filter by the creator of Element -* Created Date, Updated Date: Filter by created and updated dates -* Value: Filter the Elements by their locator value. This can be used to search Elements by their locator value as well. -* Labels: Filter by the tag/label for an element -* Usage in Test Cases: Filter on the basis of the Element’s usage in Test Cases - Used, unused, or all. +1. **Affected List:** The affected list button in the elements list shows the test cases that are affected by modification on the corresponding element. The test suites and the test plans containing these test cases can also be viewed from this page. -Modify the filtering options and click on the Filter button to filter the list. -When you click on the Filter button, the Elements list would be filtered as per your selected filtering options. If you want to filter more, make changes to the filtering options and click on Filter again. +2. **Sort the Elements:** The Elements list can be sorted on the basis of **Element Name**, **Created Date**, **Update Date**, **Old** or **New**. +![Sort Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waoelem.png) -Click on the Close button to get to the filtered list. -Saving and updating Element Filters work the same as Test Case Filters. Refer to the [Test Case Filters](https://testsigma.com/docs/test-cases/manage/filters/) article to learn more about Filter Actions +3. **Filter Elements:** Filter option lets you filter element list as per your selected options. You can filter list as per the following options: + - **Name**: Filter the elements by their Name. This can be used to search elements by name as well. + + - **Type**: Filter the elements on the basis of locator type. + + - **Screen Name**: Filter by screen name of the element. + + - **Created By**: Filter by the creator of element. + + - **Created Date/Updated Date**: Filter by created and updated dates. + + - **Element Value**: Filter the elements by their locator value. This can be used to search elements by their locator value as well. + + - **Labels**: Filter by the tag/label for an element. + + - **Usage in Test Cases**: Filter on the basis of the element’s usage in test cases - Used, unused, or all. -
+![Filters](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cewaov.png) ---- -## **Element Review Management** -Larger teams can enable Review Management for the Elements so that the Elements used in the Test Cases are reviewed similar to a Test Case before finalizing and adding to the Regression Test Suite. [Learn more here](https://testsigma.com/docs/collaboration/elements-review-management/) - -
--- -## **Dynamic Elements with Test Data** -Some advanced use-cases call for Elements with dynamic locators. A few of them are listed below: - -[Using Parameter Test Data for Dynamic locators](https://testsigma.com/docs/elements/dynamic-elements/with-parameter-test-data/)
-[Using Runtime Test Data for Dynamic locators](https://testsigma.com/docs/elements/dynamic-elements/with-runtime-test-data/)
-[Using Environment Test Data for Dynamic locators](https://testsigma.com/docs/elements/dynamic-elements/with-environment-data/)
- +## **Element Review Management** +Larger teams can enable **Review Management** for the elements so that the elements used in the test cases are reviewed similar to a test case before finalizing and adding to the regression test suite. Learn more about review management [here](https://testsigma.com/docs/collaboration/elements-review-management/). +--- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/record-multiple-elements.md b/src/pages/docs/elements/web-apps/record-multiple-elements.md index 3f50b319..fd2274d5 100644 --- a/src/pages/docs/elements/web-apps/record-multiple-elements.md +++ b/src/pages/docs/elements/web-apps/record-multiple-elements.md @@ -1,5 +1,5 @@ --- -title: "Record Multiple Elements Using Chrome Extension for a web application" +title: "Capture Multiple Elements for a Web Project" metadesc: "Elements play an important role in Test Automation. Learn how to create elements using Testsigma's test recorder extension for a Web Application." order: 6.22 page_id: "Record Multiple Elements Using Chrome Extension for a web application" @@ -8,59 +8,66 @@ contextual_links: - type: section name: "Contents" - type: link - name: "Pre-requisite" - url: "#pre-requisite" + name: "Prerequisites" + url: "#prerequisites" +- type: link + name: "Steps to Create Multiple Elements" + url: "#steps-to-create-multiple-elements" --- --- -Sometimes, during test creation, we need to capture the details of multiple elements. In this article, we will discuss how to do that using Testsigma’s test recorder chrome extension. +Sometimes, during test creation, we need to capture the details of multiple elements. This article discusses how to capture multiple elements using recorder. -
--- -## **Pre-requisite** -You should have the Testsigma test step recorder chrome extension already installed. If not, then refer to the document [here](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). +## **Prerequisites** + +- You should know how to create an web [project](https://testsigma.com/docs/projects/overview/) in Testsigma. -**Steps** +- You should have [Testsigma chrome extension installed](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/). -Here we will be capturing multiple elements via the Elements page. Learn more about [Elements](https://testsigma.com/docs/elements/web-apps/overview/). +- A Web app to test. -1. Go to the Elements page via **Test Development > Elements**. The Elements page should look something like the below screenshot: -![all-Elements-page-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/web-apps/record-multiple-elements/all-Elements-page-in-Testsigma.png) +--- + -2. To capture elements via the Test recorder chrome extension, click on the record button on the top right corner of the Elements page, the button is also highlighted in the screenshot below: +## **Steps to Create Multiple Elements** -![record button on All Elements page in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/record-button-all-elements-page-testsigma.png) +1. Navigate to **Create Tests > Elements**. +![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sielelements.png) -3. When you click on the **Record** button, a new tab will open. -4. Enter the URL from which you want to capture the elements. For example, we opened a new tab and entered the URL for orangehrmlive. +2. Click on **Record**. +![Create Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waeccorec.png) -![record Elements start recording in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/record-elements-start-recording-testsigma.png) -6. Now, hover over the element you want to capture and make sure that is highlighted in green as shown in the screenshot below where we wanted to capture the username field: +3. This will open a new tab. Enter the URL from which you want to capture the elements. The Testsigma test recorder will appear and will be ready to start recording. Here, we entered the URL for Simply Travel Web. +![Simply Travel URL](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecmerec.png) -![hover over element to record Elements in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/hover-over-element-record-elements-testsigma.png) -7. Now click on the hovered element and wait for the element to appear in the **Record Elements** window as shown below: +4. Hover over the element you want to capture and make sure that it is highlighted in green (here we are capturing the login/signup field): +![Element Highlight](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waechgr.png) -![click hovered element while recording Elements in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/click-hovered-element-record-elements-testsigma.png) -8. Repeat steps 6 and 7 for all the elements you want to capture, you may navigate to another page if you need to. For your reference, below is a screenshot where we captured multiple elements following the above steps. +5. Click on the hovered element and wait for the element to appear in the recorder. +![Click](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecwfetrec.png) -![record multiple elements via test step recorder in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/record-multiple-elements-test-step-recorder-testsigma.png) -9. Now click on the save button on the **Record Elements** window. The Element will be saved and a message **Elements created successfully** will appear, the message is also highlighted below: +6. Repeat steps 4 and 5 for every element you want to capture. -![Elements created successfully via the test step recorder in Testsigma](https://docs.testsigma.com/images/record-multiple-elements/elements-created-successfully-test-step-recorder-testsigma.png) -10. You can also check if the Element was created successfully by searching for it on the **Elements** page as shown below: +7. Once you have captured the elements, click on **Done**. +![Done](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waeccodone.png) -![filter-Elements-in-Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/web-apps/record-multiple-elements/filter-Elements-in-Testsigma.png) +8. You'll be redirected to the **Elements** page, where you can see all recorded elements. +![Elements Page](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/waecallelm.png) + + +--- diff --git a/src/pages/docs/elements/web-apps/shadow-dom.md b/src/pages/docs/elements/web-apps/shadow-dom.md index f6f1ae38..749d159e 100644 --- a/src/pages/docs/elements/web-apps/shadow-dom.md +++ b/src/pages/docs/elements/web-apps/shadow-dom.md @@ -12,6 +12,9 @@ contextual_links: - type: link name: "Identifying Shadow DOM in a Webpage" url: "#identifying-shadow-dom-in-a-webpage" +- type: link + name: "Prerequisites" + url: "#prerequisites" - type: link name: "Basic Shadow DOM Terminologies" url: "#basic-shadow-dom-terminologies" @@ -28,7 +31,7 @@ To perform reliable tests, you need to find these elements. This guide will expl --- -### **Prerequisites** +## **Prerequisites** You must understand specific concepts such as creating [Projects](https://testsigma.com/docs/projects/overview/), [Test Cases](https://testsigma.com/docs/test-cases/manage/add-edit-delete/), [Elements](https://testsigma.com/docs/elements/overview/), and [Recording Test Steps](https://testsigma.com/docs/test-cases/create-steps-recorder/web-apps/overview/). diff --git a/src/pages/docs/elements/web-apps/supported-locator-types.md b/src/pages/docs/elements/web-apps/supported-locator-types.md index 5b89331a..b1263f7d 100644 --- a/src/pages/docs/elements/web-apps/supported-locator-types.md +++ b/src/pages/docs/elements/web-apps/supported-locator-types.md @@ -9,8 +9,8 @@ contextual_links: - type: section name: "Contents" - type: link - name: "Locators supported by Testsigma to create Elements" - url: "#locators-supported-by-testsigma-to-create-elements" + name: "Supported Locators in Testsigma" + url: "#supported-locators-in-testsigma" - type: link name: "XPath" url: "#1-xpath" @@ -36,12 +36,11 @@ contextual_links: --- -Webpages offer a bunch of location mechanisms to search and locate Elements on the page for interacting with it. The most prominent ones are XPath and CSS Selectors. - -
+Webpages offer many location mechanisms to search and locate elements on the page to interact with. The most prominent ones are XPath and CSS Selectors. This article discusses locators supported by Testsigma to create elements. --- -## **Locators supported by Testsigma to create Elements** + +## **Supported Locators in Testsigma** * XPath
* CSS Selector
* Link Text and Partial Link Text
@@ -50,9 +49,9 @@ Webpages offer a bunch of location mechanisms to search and locate Elements on t * Class Name
* Tag Name
-![Create Element Locator Type Dropdown](https://docs.testsigma.com/images/supported-locator-types/create-element-locator-dropdown.png) --- + ## **1. XPath** XPath is a query language used to navigate through elements and attributes in an XML document. XPath locators are very powerful and flexible. @@ -64,12 +63,12 @@ Any element on the page can be located using multiple XPath definitions and most XPath for the Email field in the above image is **//input[@id="email"]** -Learn how to create [Dynamic Element locators](https://testsigma.com/docs/elements/dynamic-elements/with-parameter-test-data/) using Xpath and CSS Locators - -
+*Learn how to create [Dynamic Element locators](https://testsigma.com/docs/elements/dynamic-elements/with-parameter-test-data/) using Xpath and CSS Locators.* --- + + ## **2. CSS Selector** CSS Selector is a string pattern used to identify an element based on a combination of HTML tag, id, class, and/or attributes. @@ -81,15 +80,11 @@ CSS Selector for the Email field using the ID is **input#email** CSS Selector for the Email field using the Class name is **input.inputtext** -Learn how to create [Dynamic Element locators](https://testsigma.com/docs/elements/dynamic-elements/with-parameter-test-data/) using Xpath and CSS Locators. - -Also only a CSS selector can access elements present inside shadow DOM. *For more information on shadow dom,refer to -[locating shadow DOM](https://testsigma.com/docs/elements/web-apps/shadow-dom/)*. +Also only a CSS selector can access elements present inside shadow DOM. *For more information on shadow dom,refer to [locating shadow DOM](https://testsigma.com/docs/elements/web-apps/shadow-dom/)*. -
+--- ---- ## **3. Link Text & Partial Link Text** Finding an element with Link Text/Partial Link Text is very simple. But make sure that the link text is unique on the web page. If there are multiple links with the same link text (such as repeated header and footer menu links), in such cases action will be performed on the first matching element with the link. @@ -101,9 +96,10 @@ Link text of the element is **“Forgot password?”** Partial link text of the element can be **Forgot**, **password**, or **For** -
--- + + ## **4. ID** ID is the most common way of locating elements since IDs are supposed to be unique for each element as per the W3C standard. If ID tags are available for an Element and they are unique, it is the most preferred option. @@ -113,10 +109,10 @@ ID is the most common way of locating elements since IDs are supposed to be uniq The ID of the element is **“email”** -
- --- + + ## **5. Name** Locating elements by Name is very similar to locating by ID, except that we use the value of the name attribute instead of the ID. And moreover, name attributes are not strictly unique. @@ -126,10 +122,10 @@ Locating elements by Name is very similar to locating by ID, except that we use The name of the element is **“userName”** -
- --- + + ## **6. Class Name** Class name locator selects the element which matches the values specified in the attribute name “class”. @@ -139,10 +135,10 @@ Class name locator selects the element which matches the values specified in the The class name of the element is **“inputtext”** -
- --- + + ## **7. Tag Name** Tag Name locator is used to find the elements matching the specified Tag/Type Name. It is very helpful when we want to extract the content within a Tag. @@ -153,3 +149,4 @@ Tag Name locator is used to find the elements matching the specified Tag/Type Na The tag name of the element is **“input”** +--- \ No newline at end of file diff --git a/src/pages/docs/elements/web-apps/verify-elements.md b/src/pages/docs/elements/web-apps/verify-elements.md index 5176cf53..f8c0b124 100644 --- a/src/pages/docs/elements/web-apps/verify-elements.md +++ b/src/pages/docs/elements/web-apps/verify-elements.md @@ -1,6 +1,6 @@ --- title: "Verifying elements in Chrome DevTools" -metadesc: "Learn how to verify elements in Chrome DevTools during testing in Testsigma to avoid test case failures. Click here to know how to verify elements in Chrome DevTools." +metadesc: "Learn how to verify elements in Chrome DevTools during testing in Testsigma to avoid test case failures. Click here to verify elements in Chrome DevTools." noindex: false order: 6.28 page_id: "Verify elements in Chrome DevTools" @@ -15,17 +15,20 @@ contextual_links: name: "Example" url: "#example" --- -
+ +--- Verifying elements in Chrome DevTools during testing ensures that the right elements are being targeted to avoid test case failures. This article explains how to verify elements in Chrome DevTools. +--- + ## **Steps to verify elements in Chrome DevTools** 1. Open the Chrome DevTools panel with **Ctrl+Shift+C** and select the **Elements** tab. 2. Use the mouse pointer to hover over the element you want to verify. As the pointer move, the corresponding HTML code will be highlighted in the **Elements** panel. 3. Once you have found the element you want to verify, you can inspect its properties in the **Elements** panel. 4. Click **Ctrl+F** and paste the xpath in the DevTools to verify if you have targeted the right element. -
+--- ## **Example** Let's take a look at the GIF below: @@ -35,3 +38,5 @@ Here, let's say we want to target **Leave Requests to Approve** element, Xpath So, we need to target a unique Xpath as shown in the image below. ![Right Xpath](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/inspect.png) + +--- \ No newline at end of file