Skip to content

Commit

Permalink
Updated Documents as per React UI - Set 1 (#278)
Browse files Browse the repository at this point in the history 
* Updated Documents as per React UI

* Updated Manage Test Case Doc for React UI - Set 1

---------

Co-authored-by: Pratheep Velicherla <[email protected]>
  • Loading branch information
@sangithravichandran @PratheepV
sangithravichandran and PratheepV authored Sep 21, 2023
1 parent f88169a commit 62c4a78
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 249 deletions.
30 changes: 17 additions & 13 deletions src/pages/docs/configuration/api-keys.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
---
title: "Generate API Key"
metadesc: "Learn how to generate an API Keys to integrate Testsigma Application with third party tools like CI/CD, bug reporting tools, and more."
pagetitle: "Generating API Key: Steps to Access Testsigma Programmatically"
metadesc: "Learn how to generate your API key in Testsigma to access and control Testsigma programmatically. Follow these simple steps for smooth integration and automation."
noindex: false
order: 19.1
page_id: "Generate API Key"
warning: false
contextual_links:
- type: section
name: "Contents"
- type: link
name: "Steps to Generate API Key"
url: "#steps-to-generate-api-key"
---

---

To integrate Testsigma with any 3rd party tool (for CI/CD, bug reporting, and so on), you need to authenticate the connection, and to do that, you need an API key. Here is how you can generate the API key via Testsigma to authenticate Testsigma for integration with your 3rd party tool.
You can access and control it programmatically once you generate the API key. Testsigma will authenticate the connection and integrate with any 3rd party tool (for CI/CD, bug reporting, and so on). This document will guide you through generating the necessary API keys.

1. log in to your Testsigma account.
2. Navigate to **Settings > API keys.**
3. Click on the ‘Create’ button on the top right corner to generate a new API key.
![API Keys page in Testsigma](https://docs.testsigma.com/images/api-keys/api-keys-page-in-testsigma.png)
---


4. This will open the ‘New API Key’ form:
## **Steps to Generate API Key**

<img src="https://docs.testsigma.com/images/api-keys/new-api-key-page-testsigma.png
" alt="new API key page in Testsigma" width="300"/>
Follow the below steps to generate an API key in Testsigma:

Enter the name you want to give to the API key, and if required, enter a description for the API key. Click the ‘Create’ button on the form.
5. The key will now be visible on the API keys page. To get the details, click on the API key you created. The details will look something like this:
1. Navigate to **Settings** > **API Keys** in the left-side navbar.
2. Click the **Generate new API Key** button in the top right corner of the screen on the **API Keys** page, and a **Generate API Key** pop-up overlay will appear.
3. In the pop-up overlay for **Generate API Key**, you can enter a **Name** for your **API Key** and specify the **number of parallel test** executions for this key. The overlay provides a toggle for restricting parallel test execution for this key.
4. After entering a name and configuring parallel settings, click the **Generate Key** button. The API key will be displayed on the screen. Click the **Copy API Key** button to copy it to your clipboard for use in your applications or scripts. ![Generate API Key](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/generate_apikey.gif)

![API key details in Testsigma](https://docs.testsigma.com/images/api-keys/api-key-details-testsigma.png)
---
107 changes: 42 additions & 65 deletions src/pages/docs/elements/web-apps/shadow-dom.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "How to locate shadow DOM elements"
metadesc: "Shadow DOM provides a way to attach a hidden DOM to a DOM element of your choice. Learn how to locate shadow DOM elements with testsigma."
title: "Shadow DOM Elements"
pagetitle: "Locate Shadow DOM Elements in Testsigma - A Comprehensive Guide"
metadesc: "Learn how to identify and interact with shadow DOM elements in Testsigma. Follow step-by-step instructions to perform effective testing on webpages that use shadow DOM."
noindex: false
order: 6.27
page_id: "Shadow DOM"
Expand All @@ -9,91 +10,67 @@ contextual_links:
- type: section
name: "Contents"
- type: link
name: "Basic shadow DOM terminologies "
url: "#basic-shadow-dom-terminologies "
name: "Identifying Shadow DOM in a Webpage"
url: "#identifying-shadow-dom-in-a-webpage"
- type: link
name: "Identifying if a webpage uses shadow DOM "
url: "#identifying-if-a-webpage-uses-shadow-dom "
name: "Basic Shadow DOM Terminologies"
url: "#basic-shadow-dom-terminologies"
- type: link
name: "Viewing DOM structure on the browser "
url: "#viewing-dom-structure-on-the-browser "
- type: link
name: "Locate shadow DOM elements "
url: "#locate-shadow-DOM-elements "
name: "Create Element for Shadow DOM"
url: "#create-element-for-shadow-dom"
---

---
<em>Document object model (DOM)</em> is an API that represents the content of HTML or XML document as a tree structure.
<em>Shadow DOM</em> provides a way to attach a hidden DOM to a DOM element of your choice, with local styles and markup detached from the rest of the web page. This helps web developers in better encapsulating their code.
But this also poses a challenge for automation testing, because elements inside a shadow root technically doesn’t exist in the main DOM. And finding the right elements is a critical requirement when creating automation test cases. Failure to identify them may result in less reliable tests.

## **Basic shadow DOM terminologies**

![Shadow DOM diagram](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/Shadow_dom_diagram.png)

1. **Shadow host**: The regular DOM node that the shadow DOM is attached to.
2. **Shadow tree**: The DOM tree inside the shadow DOM.
3. **Shadow boundary**: The place where the shadow DOM ends, and the regular DOM begins.
4. **Shadow root**: The root node of the shadow tree.


## **Identifying if a webpage uses shadow DOM**

To identify if a webpage uses Shadow DOM:

1. On the website, **Right click>inspect**. The chrome developer tool opens and highlights its elements.

2. On the **Elements** tab, expand the `<body>` tag. Verify if the `<body>` element contains `#shadow-root` which indicates the existence of shadow DOM on the website.

## **Viewing DOM structure on the browser**

1. On the website, **Right click>Inspect**.
Shadow DOM elements allow you to encapsulate and isolate styling and functionality in a webpage, maintaining a clean structure. The Document Object Model (DOM) attaches a hidden DOM to a chosen element, keeping local styles and markup separate. Although it benefits developers, it poses challenges for automation testing since shadow root elements do not exist in the main DOM.

2. Navigate to **Settings** on the top right corner of the console.
To perform reliable tests, you need to find these elements. This guide will explain how Testsigma can help you locate and capture Shadow DOM elements for effective testing.

3. On the Settings page, navigate to the **Preferences** tab> **Elements** section.

4. Select the checkbox **Show user agent shadow DOM**. Then examine the elements to see the DOM structure.

## **Locate shadow DOM elements**

In this section, we demonstrate how to locate shadow DOM elements with Testsigma for creating test cases.We are using the shopping website [shop.polymer-project](https://shop.polymer-project.org/) for our demo.

1. On the website, navigate to the child object or the element you want to interact.
---

2. **Right click > inspect**. The Chrome developer tool opens and highlights its elements.
### **Prerequisites**

![Inspect shadow DOM element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/shadow_dom_inspect.png)
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/).

3. Right click on the element. Select **Copy> Copy selector**. Save the value for future use.
---

![Inspect shadow DOM element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/inspect_shadow_dom.png)
## **Identifying Shadow DOM in a Webpage**

![Copy CSS selector of DOM element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/copy_selector_shadow_dom.png)
Follow the below steps to identify if a webpage uses Shadow DOM:

4. Now identify the shadow host elements of the same shadow DOM element upto its shadow root element.For this, navigate the shadow DOM structure to find the immediate `#shadow-root(open)`element and its `shadow host`.
1. To open the **Chrome Developer Tools** and highlight webpage **elements**, right-click on the webpage and select **Inspect**.
2. Expand the **`<body>`** tag in the **Elements** tab and verify if it contains **`#shadow-root`** to indicate the presence of Shadow DOM on the webpage.

1. Save the value of the CSS selector of the `shadow host`. To save the value of the CSS selector repeat *step 3*.
2. Repeat *step 4*,until the CSS selector values of all the parent shadow host elements are saved for future use.
![Identify Shadowdom Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/identify_shadowdom.png)

6. Now return to the Testsigma UI, to define the properties of the shadow DOM element on the **Create Element** window. *For more information on how to define elements manually, refer to [Creating elements manually](https://testsigma.com/docs/elements/web-apps/create-manually/)*.
---

7. On the **Create Element** window, provide the following details:
1. Name
2. Screen Name
## **Basic Shadow DOM Terminologies**

8. Under the element type, select **CSS selector** from the drop-down menu. This is because only CSS selector can access elements present inside shadow DOM.
1. **Shadow Host**: The HTML element is the entry point for encapsulated components by attaching a shadow DOM.
2. **Shadow Tree**: A component encapsulates and isolates its internal structure and styling through a hidden tree of DOM elements within a shadow DOM.
3. **Shadow Boundary**: An invisible wall separates the shadow DOM from the main DOM, keeping styles and functionality isolated.
4. **Shadow Root**: The shadow DOM's starting point is the hidden tree's root node, where everything begins.

9. Paste the value of the CSS selector of the shadow DOM element saved in *Step 3*, in the **Enter the value** textbox.
![Shadow DOM diagram](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/basic_shadowdom.png)

10. Select the checkbox **Present inside Shadow DOM**.
---

![create element window](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/create_elements_shadow_dom.png)
## **Create Element for Shadow DOM**

11. Now specify CSS Selector value of each the shadow host elements identified in *Step 5* from parent host to current host in order.
This section will demonstrate how to capture and store shadow DOM elements using Testsigma. For this demonstration, we'll use the shopping website [shop.polymer-project](https://shop.polymer-project.org/).

![specify shadow host elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/elements/shadow-dom/CSs_selectors_specified.png)
1. Navigate to **Create Tests** > **Elements** in the left side navbar. Click on **Create Element** at the top right corner of the **Elements List** page to capture the Element on the webpage. ![Create Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/elementstab_shadowdom.png)
2. Click **Create Element** to open an overlay screen on the right side of the page. Click **Record Element** within this overlay to easily capture the Element. Open the webpage in a new tab and click on the **Element** you want to capture. Then, click **Capture** to record the Element in the Record Element pop-up menu. ![Record Shadowdom Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/record_element_shadowdom.gif)
3. Alternatively, manually fill in the **Name** and **Screen Name**, **Element Type**, **Element Value**, and **Host Values** fields to capture the Element.
4. Fill in the fields with the element **Name** and **Screen Name**. Then, choose **CSS Selector** as the **Element Type** from the dropdown menu since only CSS selectors can access elements within shadow DOM.
5. To obtain the CSS Selector, **right-click** on the webpage and choose **Inspect** to open **Chrome Developer Tools**. Then, you must locate the Element you need using the **Select Element in the page to inspect it** icon.
6. Once you have located the Element, right-click on it and choose **Copy** from the menu. Next, select **Selector** from the dropdown menu and copy the **CSS selector** value that appears. Finally, paste it into the **Enter the value** field. ![Capture Shadow Dom Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/captureelement_shadowdom.gif)
7. Check the box **Present inside Nested Context** to specify the hosts from the parent host to the current element host in the order.
8. Follow the order from the **Parent Host** to the **Current Host** and specify each shadow host element's **Shadow DOM** and **CSS Selector** values.
9. Click **Create Element** and use it in Test Cases. ![Shadow Host Capture](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/hostcapture_shadowdom.gif)

12. Click **Create**.
[[info | NOTE:]]
| To create an element in a **Test Case**, use **NLP** to add a **new step** to the test case and include a placeholder for the **Element**. Capture elements on the webpage by clicking **Create Element**, or use **Testsigma Record** to capture the steps and their associated elements during test step recording.

13. Run the test case to verify if element is identified correctly.
---
89 changes: 21 additions & 68 deletions src/pages/docs/test-cases/create-steps-nl/bulk-actions.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: "Bulk Actions"
metadesc: "Select multiple test steps at a time and then perform bulk actions on your selection | Learn how to edit multiple test steps in Testsigma"
pagetitle: "Manage test steps efficiently with bulk actions in Testsigma."
metadesc: "Streamline your testing process by using Testsigma's Bulk Actions feature to perform actions like selecting all, updating settings, creating blocks, and more in bulk."
noindex: false
order: 4.49
page_id: "Bulk Actions"
Expand All @@ -9,81 +10,33 @@ contextual_links:
- type: section
name: "Contents"
- type: link
name: "Pre-requisites"
url: "#pre-requisites"
- type: link
name: "How to bulk edit multiple test steps"
url: "#how-to-bulk-edit-multiple-test-steps"
- type: link
name: "1. Bulk Update"
url: "#1-bulk-update"
- type: link
name: "2. Create Step Group:"
url: "#2-create-step-group"
- type: link
name: "3. Delete:"
url: "#3-delete"
name: "Use Bulk Action in Test Step"
url: "#use-bulk-action-in-test-step"
---

---

When test steps are created, Testsigma gives you the option to select multiple test steps at a time and then perform bulk actions on your selection. In this document, we will discuss those actions and how to perform them.

&emsp;

---
## **Pre-requisites:**

You should know how to

1. [create a test case.](https://testsigma.com/docs/test-cases/manage/add-edit-delete/)
2. [create test steps.](https://testsigma.com/docs/test-cases/create-steps-nl/overview/)

&emsp;

---
## **How to bulk edit multiple test steps:**

1. Create a test case. And then go to the created test steps.
2. To select a step, hover over the test step number. The number will change into a checkbox:

![checkbox to select a test step in a test case in Testsigma](https://docs.testsigma.com/images/bulk-actions/check-box-select-test-step-in-test-case-testsigma.png)

3. Click the checkbox
4. Repeat 2. and 3. to select more test steps. Bulk actions option appears when you’ve selected at least two test steps. To select all the steps at once, you can click the button "Select All"

![bulk actions when multiple test steps are selected in Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/bulk-actions/select-all-bulk-actions.png)

&emsp;

Now, let’s discuss bulk actions:

&emsp;
Using Bulk Actions in Testsigma simplifies managing multiple test steps. You can perform actions such as selecting all, updating settings, creating blocks, creating step groups, and deleting multiple test steps. This guide will help you understand how to use Bulk Actions effectively.

---
## **1. Bulk Update**

![bulk update form in Testsigma](https://docs.testsigma.com/images/bulk-actions/bulk-update-form-testsigma.png)
### **Pre-requisites:**

Here are the settings you can update via Bulk Update:

1. **Max. wait time**: You can enter a value in seconds (which should be less that 120) , and the selected test steps will wait for this duration before they fail on test execution
2. **Stop Test Case execution on Test Step failure**: If you enable this, the test case execution will stop if any of the selected test steps fails.
3. **Disable Step**: Enabling this would mean that the selected test steps will not be executed on test execution.

To save the changes you made on the bulk update form, you need to click on the ‘Update’ button.

&emsp;
Before using the Bulk Actions, 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/), and [Test Steps](https://testsigma.com/docs/test-cases/create-steps-nl/overview/).

---
## **2. Create Step Group**:
You can save the selected test steps as a step group. To do this, click on ‘Create Step Group’, name the step group and click ‘Create’ to save the step group:
## **Use Bulk Action in Test Step**

![create step group window popup in Testsigma](https://docs.testsigma.com/images/bulk-actions/create-step-group-window-pop-up-testsigma.png)

Step groups are reusable. Learn more about [step groups](https://testsigma.com/docs/test-cases/step-types/step-group/).

---
## **3. Delete**:
Delete selected test steps by clicking on the ‘Delete’ button.
Follow these steps to use Bulk Actions for your test steps:

1. Select a **Step** on the **Test Case Details** page by hovering your mouse over the test step number. The test step number will change into a **checkbox** as you hover.
2. Click the **checkboxes** next to each test step to select the **test steps** you want to include in the **bulk action**.
3. The bulk actions option appears when you've selected any test step in the **Test Case Details** page. To select all the steps at once, click the **Select All** button in the menu bar. ![Enable Bulk Actions](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/steps_bulkactions.gif)
4. You can perform bulk actions on multiple test steps by selecting them on the menu bar. The actions available are:
- **Select All**: This option allows you to select all the test steps on the current page.
- **Update Settings**: You can use this option to update settings for the selected test steps all at once. For more information, refer to [Update Settings](https://testsigma.com/docs/test-cases/create-steps-nl/step-settings/#update-settings).
- **Create Block**: Use this option to create a block from the selected test steps. This will help you manage and structure your test cases. For more information, refer to [Step Block](https://testsigma.com/docs/test-cases/step-types/block/#create-a-block-using-bulk-action).
- **Create Step Group**: This action lets you create a step group containing the selected test steps. Step groups help you organise and reuse test steps. For more information, refer to [Step Group](https://testsigma.com/docs/test-cases/step-types/step-group/#create-step-group-from-a-test-case).
- **Delete**: You can delete the selected test steps in bulk if they are no longer needed.
5. Click on **Exit Bulk Action** in the top right corner of the screen within the menu bar to exit the Bulk Action mode. ![Perform Bulk Actions](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/perform_bulkactions.gif)

---
Loading

0 comments on commit 62c4a78

Please sign in to comment.