<script custom-tag="" type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"ATF Custom UI can not distinguish between multiple identical components","image":"http://support.servicenow.com/29f1d2661baf6010cafa53d8624bcb43.iix","author":{"name":"ServiceNow Support","url":"http://support.servicenow.com/now"},"keywords":"ServiceNow, NowSupport public Knowledge Base articles, Known Error,KB0789969,","wordcount":"368","publisher":"ServiceNow","url":"https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0789969","datePublished":"2020-01-23","dateCreated":"2019-12-17","dateModified":"2023-03-22","description":"<h2>ATF Custom UI can not distinguish between multiple identical components</h2><br/><div style=\"overflow-x:auto\"><h2>Description</h2><div><p>ATF will still click the first button after the page devel","articleBody":"<h2>ATF Custom UI can not distinguish between multiple identical components</h2><br/><div style=\"overflow-x:auto\"><h2>Description</h2><div><p>ATF will still click the first button after the page developer has removed the button defined in an ATF Custom UI step.</p>\r\n<p> </p></div><h2>Steps to Reproduce</h2><div> <p></p><p>1. Navigate to the "System UI > UI Pages" module and select "New".<br /><br />2. Fill out the fields as follows:<br />"Name" = <any value><br />"HTML" = <br /><span style=\"font-family: 'courier new', courier;\"><?xml version="1.0" encoding="utf-8" ?></span><br /><span style=\"font-family: 'courier new', courier;\"><j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"></span><br /><span style=\"font-family: 'courier new', courier;\"><div id="mydiv"></div></span><br /><span style=\"font-family: 'courier new', courier;\"><div><button onclick="foo('First')">Click me!</button></div></span><br /><span style=\"font-family: 'courier new', courier;\"><div><button onclick="foo('Second')">Click me!</button></div></span><br /><span style=\"font-family: 'courier new', courier;\"><div><button onclick="foo('Third')">Click me!</button></div></span><br /><span style=\"font-family: 'courier new', courier;\"></j:jelly></span><br />"Client script" = <br /><span style=\"font-family: 'courier new', courier;\">function foo(msg) {</span><br /><span style=\"font-family: 'courier new', courier;\">gel('mydiv').innerText = msg;</span><br /><span style=\"font-family: 'courier new', courier;\">}</span><br /><br />3. Click on "Submit".<br />4. Navigate to the "Automated Test Framework (ATF) > Tests" module, click "New" and then "Save".<br />5. Click "Add Test Step", then "Form", then "Open an Existing Record" and "Next".<br />6. Set "Table" to "UI Page" and "Record" to the record created in step 1-3, then click "Submit".<br />7. Click Add Test Step > Form > Click a UI Action, then "Next".<br />8. Set "UI Action" to "Try It" and click "Submit".<br />9. Click Add Test Step > Custom UI > Click Component (Custom UI) then click "Next".<br />10. When prompted click "Retrieve components", allow the test to run to completion in the tab it opens, then go back to the test designed and click "Next".<br />11. In the component dropdown select any of the "Button <button>: Click me!" components then click "Submit".<br />12. Click "Run" and then "Run Test" if prompted.<br /><br />Observe not all the buttons can be clicked by navigating back to the "Click Component (Custom UI)" step and changing the component dropdown. No matter which one of the "Button <button>: Click me!" components are selected, it will only ever click on the very first one, making it impossible to click the "Second" or "Third" buttons.<br /><br /></p></div><h2>Workaround</h2><div><p>This issue has been addressed in Rome. The ATF is better equipped to find and interact with multiple identical UI Components / html elements on the page.</p></div><div><br /><strong>Related Problem: PRB1356037</strong></div></div>"}</script>