{"id":4706,"date":"2014-03-25T14:45:12","date_gmt":"2014-03-25T18:45:12","guid":{"rendered":"http:\/\/www.webperformance.com\/load-testing-tools\/blog\/?page_id=4706"},"modified":"2018-08-09T08:21:26","modified_gmt":"2018-08-09T12:21:26","slug":"locating-elements-iframe","status":"publish","type":"page","link":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/articles\/real-browser-manual\/building-a-testcase\/how-locate-element-the-page\/locating-elements-iframe\/","title":{"rendered":"Locating Elements: In an IFrame"},"content":{"rendered":"<div class=\"landing-page-7mh\">\n    <link href=\"\/css\/how-many-users.css\" rel=\"stylesheet\"\/>\n<div class=\"page-title grid\">\n<h2 class=\"unit\">Web Performance Consulting<\/h2>\n<div class=\"product-actions var--footer\">\n      <span><br \/>\n        Our experts find out how many users <strong>your website<\/strong> can handle!<br \/>\n      <\/span><br \/>\n        &nbsp;<br \/>\n        <a href=\"\/load-testing-consulting-services\/\">Learn More<\/a>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>Do you have these symptoms?<\/p>\n<ul>\n<li>Cannot locate the element using strategies that should obviously be working<\/li>\n<li>Element ID locator fails<\/li>\n<li>XPath locator fails, using XPath generated by the browser<\/li>\n<\/ul>\n<p>If so, your target element might be in an <a href=\"http:\/\/www.w3schools.com\/tags\/tag_iframe.asp\">IFrame<\/a>.<\/p>\n<h2>What is an IFrame?<\/h2>\n<p>What appears to be a single web page may actually be a collection of pages &#8211; a parent page with a number of child pages embedded within it. The &lt;iframe&gt; tag is used to accomplish this &#8211; it can be used for variety of purposes, but is most commonly used for authentication controls and embedded ads.<\/p>\n<h2>Example of an IFrame<\/h2>\n<p>This is example is from the login page of our <a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/locating-elements-iframe\/\">support website<\/a>. The page has a section that looks like this:<\/p>\n<p><a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4713\" alt=\"\" src=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-1.png\" width=\"432\" height=\"226\" \/><\/a>Inspecting the username field in the browser&#8217;s developer tools reveals the field has both an ID and a field name &#8211; making it easy to locate:<\/p>\n<p><a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4714\" alt=\"\" src=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-2.png\" width=\"605\" height=\"96\" \/><\/a>However,\u00a0 locating it using either the field name or the ID may fail because the entire login form is contained in an IFrame.\u00a0 This fact is not obvious until you move farther up the tree of the DOM until you find:<\/p>\n<p><a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4715\" alt=\"\" src=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-3.png\" width=\"642\" height=\"149\" \/><\/a>Here you can see that there is a complete HTML document embedded inside an &lt;iframe&gt; tag within the page. The (collapsed) body tag of the login panel is highlighted. Hidden below that is the username field from above.<\/p>\n<p>When Load Tester searches for an element, it can only look in a single document (web page). Since the username field resides in a separate document, the locator fails.<\/p>\n<h2>The Solution<\/h2>\n<p>Before interacting with elements in an IFrame, Load Tester must <em>switch<\/em> to that IFrame. In the example above, the IFrame has an element ID, so the step configuration would look like this:<\/p>\n<h2><a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4716\" alt=\"\" src=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-content\/uploads\/2014\/03\/IFrame-4.png\" width=\"498\" height=\"40\" \/><\/a><\/h2>\n<h2>Limitations and Other Notes<\/h2>\n<p>In the example of our support system login and many other sites, Load Tester will detect the IFrame and create a working <em>Select Frame<\/em> step. Nonetheless, many testcases will require manual configuration of this step.<\/p>\n<p>See the <a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/supported-operations-browser-testcases\/\">Supported Operations<\/a> page for more information about Load Tester&#8217;s IFrame support.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web Performance Consulting<\/p>\n<p>        Our experts find out how many users your website can handle!<\/p>\n<p>        &nbsp;<br \/>\n        <a href=\"\/load-testing-consulting-services\/\">Learn More<\/a><\/p>\n<p>Do you have these symptoms?<\/p>\n<p>Cannot locate the element using strategies that should obviously be working<br \/>\nElement ID locator fails<br \/>\nXPath locator fails, using XPath generated by the browser<\/p>\n<p>If so, your target element might be in an <a href=\"http:\/\/www.w3schools.com\/tags\/tag_iframe.asp\">IFrame<\/a>.<br \/>\nWhat is an IFrame?<br \/>\nWhat appears &hellip; <a href=\"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/articles\/real-browser-manual\/building-a-testcase\/how-locate-element-the-page\/locating-elements-iframe\/\">Continue reading &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":4616,"menu_order":5,"comment_status":"open","ping_status":"open","template":"manual-page.php","meta":{"footnotes":""},"class_list":["post-4706","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/pages\/4706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/comments?post=4706"}],"version-history":[{"count":6,"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/pages\/4706\/revisions"}],"predecessor-version":[{"id":6184,"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/pages\/4706\/revisions\/6184"}],"up":[{"embeddable":true,"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/pages\/4616"}],"wp:attachment":[{"href":"https:\/\/www.webperformance.com\/load-testing-tools\/blog\/wp-json\/wp\/v2\/media?parent=4706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}