Weekly FAQs (8) - Automation Testing Solutions (Part 2)

Product Forums Tips & Tricks
, ,
1

:pushpin: FAQs under this topic:
29. What are tips to work with shadow-root elements?
30. How to close the print dialog box while running the test?
31. Why does Microsoft Authenticator show different landing pages?
32. How to allow popup Download Multiple Files in Chrome?

:point_right: This is the second part of Automation Testing Solutions. See Part 1 here.

29. What are tips to work with shadow-root elements?

There’s a useful tip to locate any kind of element which is under a shadow DOM with a CSS locator. In order to use a custom CSS locator, you have to add a new attribute named “css” to the Object’s Properties table and activate it.

The condition must be “equals” and the value is a CSS selector string that points to the target element. If you are new to the CSS locator, you can refer to this document for more details CSS Selectors Reference

1.png

Please note that in order to use a custom CSS locator, you have to add a new attribute named “css” to the Object’s Properties table and activate it. The Condition must be “equals” and Value is a CSS selector string that points to the target element. If you are new to the CSS locator, you can refer to this document for more details CSS Selectors Reference.

  • decrease the “wait for element timeout” in the project settings. However, it could affect other steps too, so try to keep it not too short.

919ffaf5-0726-48f4-9d42-532fc7f8d9e9.png

Below is an example to work with shadow DOM elements:

  1. Steps:
  • Access to https://www.ti.com,
  • Click on “Ship to” dropdown
  • Input a country text
  • Select the country after search

6c10708f-8068-43d0-9aab-081be9bd051b.png

  1. How to identify the objects onin the web page:

We have the following objects to interact with: “Ship To” dropdown, Search box, the returned country option on the Country menu.

When inspecting the elements, we see that these elements are under #shadow-root. Therefore, we named them as follows:

f810a671-96b6-4ebd-a165-50b17c95d3d6.png

Each element is labeled as Ax_y in which

  • x: the order of the element
  • y: the parent order

For example:

  • A1: is the shadow root parent
  • A2_1: the “Ship To” dropdown. A2_1 means it is a child under the shadow-root A1.
  • A3_1: is also a child under shadow-root A1, but it will be Shadow Root Parent of other element A4
  • A4_3: the Search box. A4_3 means it is a child under the shadow-root A3.
    A5_1: the returned after search country option on the country menu. A5_1 means it is a child under the shadow-root A1
  1. Create the objects in KS:

To let KS recognize shadow elements, you need to add an attribute name CSS for the element as below:

  • A1:

9fbbab5a-f283-492a-a55a-2d1344f623a0.png

  • A2_1:

e8c3af96-826a-4e82-a55b-7d541e448c85.png

You can refer to this document for more details CSS Selectors Reference

  • A3_1:

cf96aba3-7103-4106-9277-6c28cf353850.png

  • A4_3:

a6faf64b-74de-46d4-8b69-85b15311e1e8__1_.png

  • A5_1:

124d6b57-5127-4152-a681-2b321d077f83__1_.png

  1. Create a script

1e5bfd5e-00dd-4807-ad7b-cfd5962484bc.png

  1. Set time out for the waiting element to a short time such as 3 seconds only to keep KS avoid waiting for the shadow element too long

e2a8366b-e374-4e30-8857-868cde5a4bfd.png

  1. Run the script

Here is the project sample:

30. How to close the print dialog box while running the tests?

Issue

Unable to close the print dialog box when running the test:

Screen_Shot_2021-10-11_at_17.37.56.png

Solution

Step 1: From the Project → Settings → Self-healing → WebUI → Enable Self-healing execution with the option “Image” is checked.

Screen_Shot_2021-09-17_at_3.43.56_PM.png

Step 2: Capture a screenshot of the element and reduce the image size to 50%. Please refer to this video for more details.

Step 3: Click on the element twice - one for focusing and one for performing the action.

Screen_Shot_2021-10-11_at_17.35.29.png

31. Why does the Microsoft authentication show different landing pages?

Issue

The user has a test script that includes Microsoft authentication steps, other team members run the script and it shows different landing pages as below, that leads the test case to be failed:

  1. Sign in screen (expected landing page)
    image002.png
  2. Pick an account
    image003.png
  3. Verify your identity
    image004.png

Solution

This is the expected behavior of Microsoft authentication when launching the normal browser to execute the test. Thus, the best practice for your case is that using a private mode to execute the test, it will help to clear the environment, credentials and show the expected log-in page to input the username and password field. Besides, we may need to add some delay seconds before and after the failed test step so that the page can have enough time to load the element that needs to interact.

Please refer to this documentation to start browsers in private mode: Start browsers in private mode

32. How to allow popup Download Multiple Files in Chrome

Background

The user tried to run a test and the popup asking to allow Download Multiple Files cannot be turned off

Solution

Use Desire Capability in Project → Settings → Desired Capabilities → WebUI → Chrome:

prefs:-> profile.default_content_setting_values.automatic_downloads : 1.0desi

6473ba5a-6a6c-4f2c-93af-aadf117d5565.png

ca55fe91-bdf5-4a07-87ad-7735d1dd38e2.png

:pushpin: Katalon Community technical FAQs are about common customer technical issues when using Katalon products. We filter these on our Helpdesk Portal 1 twice every month to help Forum users get an easy approach to the solutions to similar problems.
If you’re paid customers, you can easily submit a ticket to our dedicated Support team.

:interrobang: Want to recommend a topic? - Leave your feedback HERE!