How can I identify a DOM selector or XPath to use in a CloudWatch canary GUI Workflow Builder?

Last updated: 2020-12-14

I'm trying to create a canary in Amazon CloudWatch using the GUI Workflow Builder. However, I'm receiving errors that indicate that I've selected an incorrect DOM element. How can I find the correct DOM selector or XPath to use?

Short description

If you've selected an incorrect DOM element when creating a canary with the GUI Workflow Builder, you might encounter the following errors:

  • "Error: Node is either not visible or not an HTMLElement."
  • "No test result returned. Error: Navigation failed because browser has disconnected!"
  • "TimeoutError: Waiting for selector"
  • "TimeoutError: Waiting for XPath"

Resolution

Determine the correct selector type

The GUI Workflow Builder has five actions. The required selector type depends on the action and the Runtime version that you use.

Runtime versions using Node.js and Puppeteer, the Verify text action uses the XPath selector. The following actions use the DOM selector:

  • Click
  • Verify selector
  • Input text
  • Click with navigation

For Runtime versions using Python and Selenium Webdriver, all actions use the XPath selector.

Identify the correct selector

DOM selectors

To find a unique attribute for your DOM:

  1. Open the context menu (right-click) for the element (such as a button, input field, div, span, or h1).
  2. Choose Inspect element (Mozilla Firefox) or Inspect (Google Chrome).
  3. Note the unique DOM attribute that you'll use to identify your element (such as id, class, or name).

If your DOM doesn't have a unique attribute, use one of the following methods to find the element:

  • Use descendant selectors to match elements based on the given path or attribute (you must use the exact path). For example, to find <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>, use div.new > a:first-child.
  • Use attribute selectors to match elements based on the presence or value of a given attribute. For example, to find <div class="user-panel main" id="userId"> <input name="login"/> </div>, use div.user-panel.main input[name='login'].

You can also get a unique DOM selector for your DOM element using your internet browser's Developer mode.

Chrome:

  1. Open the context menu (right-click) for the element, and then choose Inspect.
  2. On the Elements tab, open the context menu (right-click) for the highlighted line.
  3. Choose Copy, and then choose Copy selector.

Firefox:

  1. Open the context menu (right-click) for the element, and then choose Inspect Elements.
  2. On the Inspector tab, open the context menu (right-click) for the highlighted line.
  3. Choose Copy, and then choose CSS selector.

Note: If there are multiple instances of the selector in the HTML document, the canary selects the first element from the returned array. Avoid selecting elements that contain the display:none; CSS attribute. These elements are invisible and cause the selector to fail.

XPath selectors

Get a unique XPath selector for your DOM element using your internet browser's Developer mode.

Chrome:

  1. Open the context menu (right-click) for the element, and then choose Inspect.
  2. On the Elements tab, open the context menu (right-click) for the highlighted line.
  3. Choose Copy, and then choose Copy XPath.

Firefox:

  1. Open the context menu (right-click) for the element, and then choose Inspect Elements.
  2. On the Inspector tab, open the context menu (right-click) for the highlighted line.
  3. Choose Copy, and then choose XPath.

Note: Before adding the XPath selector that you copied to the canary, remove the "//" prefix. The canary adds the "//" prefix to your code by default.

Test the new selector and confirm that it's correct

Open Console mode in your internet browser

Chrome:

  1. At the top right of the browser, choose Customize.
  2. Expand the More tools option, and then choose Developer tools.
  3. With DevTools open in the browser, choose the Console panel.

Firefox:

  1. At the top right of the browser, choose Open menu.
  2. Choose Web Developer, and then choose Web Console.
    Note: In some versions of Firefox, the Web Developer menu is located in the Tools menu.

Test the DOM selector

The syntax to test the DOM selector query in the browser console is: document.querySelectorAll("[AttributeName='AttributeValue']"). For example, if you have a div element with id='username', use the following pattern: document.querySelectorAll("[name='username']").

Test the XPath selector

The syntax to test the XPath query in the browser console is: $x("XPATH_QUERY"). For example, if you have a div element with id='welcome' that contains an h1 element, use the following pattern: $x("//div[@id='welcome']//h1). When you add this path to the canary, omit the // prefix.

Add the new selector to the CloudWatch Canary

  1. Open the CloudWatch console.
  2. For Synthetics, choose Canaries.
  3. Choose Create Canary.
  4. Choose Use a blueprint, and then choose GUI Workflow Builder.
  5. Refer to the example in GUI Workflow Builder to complete a blueprint that uses the newly created selector.

  6. Did this article help?


    Do you need billing or technical support?