"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", h4: "h4", li: "li", p: "p", pre: "pre", ul: "ul", ..._provideComponents(), ...props.components }, {Note} = _components; if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "introduction", children: "Introduction" }), "\n", _jsx(_components.p, { children: "Our engine is using Selenium to locate the elements in Web Applications." }), "\n", _jsx(_components.p, { children: "The different locators are as follows:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Id" }), "\n", _jsx(_components.li, { children: "Text Inside" }), "\n", _jsx(_components.li, { children: "Name" }), "\n", _jsx(_components.li, { children: "Class Name" }), "\n", _jsx(_components.li, { children: "XPath" }), "\n", _jsx(_components.li, { children: "CSS Selector" }), "\n", _jsx(_components.li, { children: "Link Text" }), "\n", _jsx(_components.li, { children: "Partial Link Text" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Even if you are using our ", _jsx(_components.a, { href: "https://chrome.google.com/webstore/detail/endtest/jbdgfkeimppmnfemmgfafiomihlibdfa", children: "Endtest Chrome Extension" }), " to locate your elements, you might still encounter situations where you need to fetch a locator."] }), "\n", _jsx(_components.p, { children: "But what can you do if you're getting an error message?" }), "\n", _jsx(_components.h2, { id: "common-errors-and-solutions", children: "Common errors and solutions" }), "\n", _jsx(_components.h3, { id: "1-element-not-found", children: "1. Element not found" }), "\n", _jsx(_components.p, { children: "This error tells you that no element could be found with the locator that you provided in the moment when your test reached that step." }), "\n", _jsx(_components.p, { children: "It could mean that the locator that you provided is not good, which means that you need to try a different locator." }), "\n", _jsx(_components.p, { children: "If the locator is correct, it could mean that the element took a bit longer to load." }), "\n", _jsx(_components.p, { children: "Our engine automatically waits for an element to be present before attempting to interact with it." }), "\n", _jsx(_components.p, { children: "And the maximum wait times (timeouts) can be configured." }), "\n", _jsxs(_components.p, { children: ["This means that the solution in this case is to increase the values of the ", _jsx(_components.code, { children: "Element Load Timeout" }), " and ", _jsx(_components.code, { children: "Page Load Timeout" }), " options from the ", _jsx(_components.code, { children: "Advanced" }), " section of the ", _jsx(_components.code, { children: "Settings" }), " for that test suite."] }), "\n", _jsxs(_components.p, { children: ["Even if the waits are automatic, you can still add a ", _jsx(_components.code, { children: "Wait Until" }), " step to wait until a certain condition is true."] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Wait Until" }), " option can be found in the ", _jsx(_components.code, { children: "Miscellaneous" }), " action."] }), "\n", _jsxs(Note, { children: [" More details are available in the ", _jsx(_components.a, { href: "/docs/advanced/waits", children: "Waits" }), " chapter. "] }), "\n", _jsx(_components.p, { children: "It's easier to debug the error if you have a screenshot taken at that exact moment." }), "\n", _jsxs(_components.p, { children: ["That can be easily achieved by selecting the ", _jsx(_components.code, { children: "On every error" }), " or ", _jsx(_components.code, { children: "On every step" }), " option from the ", _jsx(_components.code, { children: "Automatic Screenshots" }), " dropdown in the ", _jsx(_components.code, { children: "Advanced" }), " section of the ", _jsx(_components.code, { children: "Settings" }), " for that test suite."] }), "\n", _jsx(_components.h3, { id: "2-element-not-clickable", children: "2. Element not clickable" }), "\n", _jsx(_components.p, { children: "Our engine automatically waits for an element to be present before attempting to interact with it." }), "\n", _jsxs(_components.p, { children: ["Details about that are provided in the ", _jsx(_components.a, { href: "/docs/advanced/waits", children: "Waits" }), " chapter."] }), "\n", _jsx(_components.p, { children: "But there are scenarios where an element might be present, but not necessarily clickable." }), "\n", _jsxs(_components.p, { children: ["In such scenarios, you need to add a ", _jsx(_components.a, { href: "/docs/advanced/waits#2-wait-until", children: "Wait Until" }), " step and use the ", _jsx(_components.code, { children: "Element is clickable" }), " condition."] }), "\n", _jsx(_components.p, { children: "There is also the possibility that the element is not clickable because it is covered by another element." }), "\n", _jsx(_components.h3, { id: "3-the-element-is-covered-by-another-element", children: "3. The element is covered by another element" }), "\n", _jsxs(_components.p, { children: ["In order to mimic a real user, our engine cannot perform a ", _jsx(_components.code, { children: "Click" }), " action on an element if it is covered by another element."] }), "\n", _jsx(_components.p, { children: "If you are getting this error message, it means that your element has been located, but a different element is covering it." }), "\n", _jsx(_components.p, { children: "The error message will tell you which element is covering your target element." }), "\n", _jsx(_components.p, { children: "This error can have multiple causes, such as a popup covering your element or a static header or footer in front of your element." }), "\n", _jsx(_components.p, { children: "The solution in this case is to perform the same action that a real user would do in order to reach that element." }), "\n", _jsxs(_components.p, { children: ["If you can scroll the element into view, add a ", _jsx(_components.code, { children: "Scroll" }), " step."] }), "\n", _jsxs(_components.p, { children: ["You can also enable the ", _jsx(_components.code, { children: "Record Scroll Events" }), " option in the ", _jsx(_components.code, { children: "Settings" }), " of the ", _jsx(_components.a, { href: "https://chrome.google.com/webstore/detail/endtest/jbdgfkeimppmnfemmgfafiomihlibdfa", children: "Endtest Chrome Extension" }), "."] }), "\n", _jsxs(_components.p, { children: ["If you can remove the element which is covering your target element, do it with a ", _jsx(_components.code, { children: "Click" }), " step or an ", _jsx(_components.code, { children: "Execute JavaScript" }), " step."] }), "\n", _jsx(_components.h3, { id: "4-could-not-write-text-in-the-web-element", children: "4. Could not write text in the web element" }), "\n", _jsxs(_components.p, { children: ["In order to mimic a real user, our engine cannot perform a ", _jsx(_components.code, { children: "Write Text" }), " action on an element if it's not an ", _jsx(_components.code, { children: "input" }), " or a ", _jsx(_components.code, { children: "textarea" }), "."] }), "\n", _jsx(_components.p, { children: "If you are getting this error message, it means that your element has been located, but it also means that you're targeting the wrong element." }), "\n", _jsxs(_components.p, { children: ["Make sure that your locator points to an ", _jsx(_components.code, { children: "input" }), " or a ", _jsx(_components.code, { children: "textarea" }), "."] }), "\n", _jsx(_components.h2, { id: "tips-and-tricks", children: "Tips and Tricks:" }), "\n", _jsx(_components.h3, { id: "1-make-sure-you-read-the-error-message", children: "1. Make sure you read the error message." }), "\n", _jsx(_components.p, { children: "The error messages will point you in the right direction or at least tell you exactly what went wrong." }), "\n", _jsx(_components.h3, { id: "2-configure-the-settings-for-the-endtest-chrome-extension", children: "2. Configure the Settings for the Endtest Chrome Extension." }), "\n", _jsxs(_components.p, { children: ["If your elements have dynamic IDs, you can enable the ", _jsx(_components.code, { children: "Don't use the \"id\" attribute" }), " option."] }), "\n", _jsxs(_components.p, { children: ["If your elements have custom data attributes, you can take advantage of that and add the names of those attributes in the ", _jsx(_components.code, { children: "Custom data attributes" }), " textarea from the ", _jsx(_components.code, { children: "Settings" }), " section of the ", _jsx(_components.a, { href: "https://chrome.google.com/webstore/detail/endtest/jbdgfkeimppmnfemmgfafiomihlibdfa", children: "Endtest Chrome Extension" }), "."] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/endtest_chrome_extension_settings.png", alt: "endtest chrome extension settings", width: "320" }), "\n", _jsx(_components.h3, { id: "3-configure-the-settings-for-your-test-suite", children: "3. Configure the Settings for your test suite" }), "\n", _jsxs(_components.p, { children: ["If you are executing the test on an environment which is a bit slower, you should increase the values of the ", _jsx(_components.code, { children: "Element Load Timeout" }), " and ", _jsx(_components.code, { children: "Page Load Timeout" }), " options from the ", _jsx(_components.code, { children: "Advanced" }), " section of the ", _jsx(_components.code, { children: "Settings" }), " for that test suite."] }), "\n", _jsx(_components.p, { children: "It's easier to debug the error if you have a screenshot taken at that exact moment." }), "\n", _jsxs(_components.p, { children: ["That can be easily achieved by selecting the ", _jsx(_components.code, { children: "On every error" }), " or ", _jsx(_components.code, { children: "On every step" }), " option from the ", _jsx(_components.code, { children: "Automatic Screenshots" }), " dropdown from the ", _jsx(_components.code, { children: "Advanced" }), " section of the ", _jsx(_components.code, { children: "Settings" }), " for that test suite."] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/endtest_web_settings.png", alt: "endtest web advanced settings", height: "500" }), "\n", _jsxs(Note, { children: ["More details are available in the ", _jsx(_components.a, { href: "/docs/advanced/advanced-settings", children: "Advanced Settings" }), " chapter. "] }), "\n", _jsx(_components.h3, { id: "4-make-sure-that-your-locator-is-unique", children: "4. Make sure that your locator is unique." }), "\n", _jsx(_components.p, { children: "If our engine finds more than one element with that locator, it will just go with the first one, which might not be the one you're interested in." }), "\n", _jsxs(_components.p, { children: ["In that case, you will also see a ", _jsx(_components.code, { children: "[WARNING]" }), " in the test execution results."] }), "\n", _jsx(_components.h3, { id: "5-try-to-use-a-different-locator-type", children: "5. Try to use a different locator type." }), "\n", _jsx(_components.p, { children: "For example, if you were using Class Name, you can try with XPath or CSS Selector." }), "\n", _jsx(_components.h3, { id: "6-is-the-element-included-in-an-iframe", children: "6. Is the element included in an iframe?" }), "\n", _jsxs(_components.p, { children: ["In that case, you need to add a ", _jsx(_components.code, { children: "Switch to iframe" }), " step before the step that interacts with that element."] }), "\n", _jsxs(_components.p, { children: ["After you're done interacting with that element, you can return to the main context by adding a ", _jsx(_components.code, { children: "Switch back to main" }), " action."] }), "\n", _jsxs(_components.p, { children: ["Both actions can be found in the ", _jsx(_components.code, { children: "Miscellaneous" }), " category."] }), "\n", _jsxs(_components.p, { children: ["More details are available in the ", _jsx(_components.a, { href: "/docs/web-tests/how-to-test-in-iframes", children: "How to Test in iframes" }), " chapter."] }), "\n", _jsx(_components.h3, { id: "7-is-the-element-covered-by-another-element", children: "7. Is the element covered by another element?" }), "\n", _jsx(_components.p, { children: "In order for our engine to interact with an element, it cannot be covered by another element." }), "\n", _jsx(_components.p, { children: "The solution in this case is to perform the same action that a real user would do in order to reach that element." }), "\n", _jsxs(_components.p, { children: ["If you can scroll the element into view, add a ", _jsx(_components.code, { children: "Scroll" }), " step."] }), "\n", _jsxs(_components.p, { children: ["If your element is covered by a popup, add a ", _jsx(_components.code, { children: "Click" }), " step to close that popup."] }), "\n", _jsxs(_components.p, { children: ["If that popup appears intermittently, that ", _jsx(_components.code, { children: "Click" }), " step should be added inside an ", _jsx(_components.code, { children: "If Statement" }), "."] }), "\n", _jsxs(_components.p, { children: ["You can also hide or eliminate the element that is covering your target element by using an ", _jsx(_components.code, { children: "Execute JavaScript" }), " action."] }), "\n", _jsx(_components.p, { children: "Or you can modify your step to click on the element which is covering your target element, if this leads to the outcome that you are looking for." }), "\n", _jsxs(_components.p, { children: ["Another option is to perform the click on your target element with an ", _jsx(_components.code, { children: "Execute JavaScript" }), " action, which we do not recommend, since it does not mimic real user behaviour."] }), "\n", _jsx(_components.h3, { id: "8-is-the-element-located-in-a-different-browser-tab", children: "8. Is the element located in a different browser tab?" }), "\n", _jsx(_components.p, { children: "If your test clicks on an element and this opens a new tab, our Selenium engine will not switch the focus to this tab automatically." }), "\n", _jsxs(_components.p, { children: ["You have to add a step for that by using the ", _jsx(_components.code, { children: "Switch to next tab" }), " and ", _jsx(_components.code, { children: "Switch to previous tab" }), " actions."] }), "\n", _jsxs(_components.p, { children: ["Both actions can be found in the ", _jsx(_components.code, { children: "Miscellaneous" }), " category."] }), "\n", _jsxs(_components.p, { children: ["More details are available in the ", _jsx(_components.a, { href: "/docs/web-tests/how-to-test-in-multiple-tabs", children: "How to Test in Multiple Tabs" }), " chapter."] }), "\n", _jsx(_components.h3, { id: "9-is-the-element-located-in-a-shadow-dom", children: "9. Is the element located in a Shadow DOM?" }), "\n", _jsxs(_components.p, { children: ["You can easily switch by using the ", _jsx(_components.code, { children: "Switch to Shadow DOM" }), " and ", _jsx(_components.code, { children: "Switch to Main DOM" }), " actions."] }), "\n", _jsxs(_components.p, { children: ["Both actions can be found in the ", _jsx(_components.code, { children: "Miscellaneous" }), " category."] }), "\n", _jsx(_components.p, { children: "It's important to know that if you have multiple nested layers of Shadow DOM, you need to switch gradually, one after another, until you reach the layer of Shadow DOM where your element is located." }), "\n", _jsxs(_components.p, { children: ["The locator for the Shadow DOM can be extracted from the element right above the ", _jsx(_components.code, { children: "shadow-root" }), "."] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/endtest_shadow_dom_xpath.png", alt: "endtest shadow DOM root", height: "350" }), "\n", _jsxs(_components.p, { children: ["Or you can simply choose to perform the Click by using an ", _jsx(_components.code, { children: "Execute JavaScript" }), " step and using the ", _jsx(_components.code, { children: "JS path" }), " of that element, without using the ", _jsx(_components.code, { children: "Switch to Shadow DOM" }), " and ", _jsx(_components.code, { children: "Switch to Main DOM" }), " actions."] }), "\n", _jsx("img", { src: "https://app.endtest.io/images/endtest_shadow_copy_js_path.png", alt: "endtest shadow DOM js path", height: "350" }), "\n", _jsx(_components.h3, { id: "10-write-a-custom-xpath-or-css-selector", children: "10. Write a custom XPath or CSS Selector." }), "\n", _jsx(_components.p, { children: "Sometimes, the default XPath or CSS Selector provided by the browser might not be precise enough." }), "\n", _jsx(_components.p, { children: "You can always write your own CSS Selectors and XPaths." }), "\n", _jsx(_components.p, { children: "The element might have a certain attribute that has a certain unique value, you can write an XPath which locates the element by using that attribute, like this:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//*[@attribute = \"attribute_value\"]" }) }), "\n", _jsx(_components.p, { children: "You can also write an XPath which locates the element by using only part of the value of the attribute:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//*[contains(@attribute, \"part_of_attribute_value\")]" }) }), "\n", _jsx(_components.p, { children: "The equivalent CSS Selector can be written like this:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "[attribute*=\"part_of_attribute_value\"]" }) }), "\n", _jsx(_components.p, { children: "And you can also write an XPath which uses multiple attributes:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//*[@attribute_1 = \"attribute_value_1\" and @attribute_2 = \"attribute_value_2\"]" }) }), "\n", _jsx(_components.p, { children: "The same XPath can be written like this:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//*[@attribute_1 = \"attribute_value_1\"][@attribute_2 = \"attribute_value_2\"]" }) }), "\n", _jsx(_components.p, { children: "The equivalent CSS Selector can be written like this:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "[attribute_1=\"attribute_value_1\"][attribute_2=\"attribute_value_2\"]" }) }), "\n", _jsx(_components.p, { children: "To narrow down the search, you can also mention the type of the element in the XPath:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//input[@attribute=\"attribute_value\"]" }) }), "\n", _jsxs(_components.p, { children: ["For example, if you're targeting the ", _jsx(_components.code, { children: "input" }), " element with the ", _jsx(_components.code, { children: "type" }), " attribute that has the value ", _jsx(_components.code, { children: "file" }), ":"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//input[@type=\"file\"]" }) }), "\n", _jsx(_components.p, { children: "The same procedure can be applied to the CSS Selector:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "input[attribute=\"attribute_value\"]" }) }), "\n", _jsx(_components.p, { children: "And this is the equivalent CSS Selector for that element:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "input[type=\"file\"]" }) }), "\n", _jsx(_components.p, { children: "Here is a situation where we do not have any unique attributes:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n \n

Apple
Orange
Banana

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "The solution is to write an XPath that uses the text from the element:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//li[text() = 'Orange']" }) }), "\n", _jsx(_components.p, { children: "If multiple elements have the exact same text, you can wrap the XPath in parentheses and provide the index to precisely target one of them:" }), "\n", _jsx(_components.p, { children: "The first element:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "(//li[text() = 'Orange'])[1]" }) }), "\n", _jsx(_components.p, { children: "The second element:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "(//li[text() = 'Orange'])[2]" }) }), "\n", _jsx(_components.p, { children: "The third element:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "(//li[text() = 'Orange'])[3]" }) }), "\n", _jsx(_components.p, { children: "You can also write an XPath which only looks for a partial match of the text:" }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "//li[contains(text(),'Orange')]" }) }), "\n", _jsx(_components.p, { children: "You should always verify the custom XPaths and CSS Selectors that you write." }), "\n", _jsx(_components.p, { children: "This can be easily done in your own Chrome browser:" }), "\n", _jsxs(_components.h4, { id: "1-open-your-chrome-browser", children: ["1. Open your ", _jsx(_components.code, { children: "Chrome" }), " browser."] }), "\n", _jsx(_components.h4, { id: "2-go-to-the-page-where-your-element-is-located", children: "2. Go to the page where your element is located." }), "\n", _jsxs(_components.h4, { id: "3-open-the-chrome-developer-tools-right-click---inspect", children: ["3. Open the ", _jsx(_components.code, { children: "Chrome Developer Tools" }), " (Right Click -> Inspect)."] }), "\n", _jsxs(_components.h4, { id: "4-go-to-the-elements-tab", children: ["4. Go to the ", _jsx(_components.code, { children: "Elements" }), " tab."] }), "\n", _jsxs(_components.h4, { id: "5-press-ctrl--f-or-command--f", children: ["5. Press ", _jsx(_components.code, { children: "Ctrl + F" }), " or ", _jsx(_components.code, { children: "Command + F" }), "."] }), "\n", _jsxs(_components.h4, { id: "6-paste-your-custom-xpath-or-css-selector-in-the-find-by-string-selector-or-xpath-input", children: ["6. Paste your custom XPath or CSS Selector in the ", _jsx(_components.code, { children: "Find by string, selector, or XPath" }), " input."] }), "\n", _jsx(_components.h4, { id: "7-if-your-custom-xpath-or-css-selector-is-correct-your-target-element-will-be-highlighted", children: "7. If your custom XPath or CSS Selector is correct, your target element will be highlighted." }), "\n", _jsx(_components.h4, { id: "8-make-sure-your-custom-xpath-or-css-selector-does-not-point-to-more-than-one-element", children: "8. Make sure your custom XPath or CSS Selector does not point to more than one element." }), "\n", _jsx("img", { src: "https://app.endtest.io/images/search_for_element_in_chrome_dev_tools.png", alt: "endtest shadow DOM js path", height: "350" }), "\n", _jsx(_components.h3, { id: "11-does-the-element-need-time-to-become-interactable", children: "11. Does the element need time to become interactable?" }), "\n", _jsx(_components.p, { children: "Our engine automatically waits for an element to be present before attempting to interact with it." }), "\n", _jsx(_components.p, { children: "There are situations where an element might be present, but not interactable yet." }), "\n", _jsxs(_components.p, { children: ["In this case, you can try adding a ", _jsx(_components.code, { children: "Pause" }), " step before the step that targets the element."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Finding elements in Web Applications