iFrame Automation Using Python Appium
An iFrame, short for "inline frame," is an HTML element used to embed another HTML document within the current document. It allows content from one webpage to be displayed within a designated area of another webpage. This enables website developers to integrate external content seamlessly into their own web pages. iFrames are commonly used for displaying advertisements, social media widgets, videos, and other types of content sourced from external websites.
Identifying iFrames in Web Browser Inspections
To verify whether an element is an iframe, you can inspect the element in your web browser. If the tag name of the element is <iframe>, or if its parent tag is <iframe>, then the page contains an iframe. You can identify iFrames by looking at the HTML structure of the webpage using the browser's developer tools.
Example
Consider an example scenario where a user accesses an embedded video from the algoshack website, as shown below:
Actions You Can Perform Using algoQA
User Actions:
- Open the mobile browser.
- Navigate to the algoshack.com website.
- Wait for the embedded YouTube video to load.
- Interact with the controls of the YouTube video (play, pause, seek, etc.).
- Verify the title and description of the video.
- Switch back to the main content of the website.
- Navigate back to the algoshack.com website.
- Close the browser session.
The corresponding Given-When-Then (GWT) steps are as follows:
Given I have access to the algoshack.com home page
When I navigate to the webpage containing the embedded YouTube video
When I wait for 10 seconds stay in home page
Then I selected the YouTube video displayed within an iframe
And I clicked the video controls (play, pause, volume, etc.)
And I verify the video title and description
And I navigate back to the algoshack.com website
Setting the iFrame XPath Using algoQA
You can set the iFrame XPath using algoQA during the profiling process.
Perform the following:
Navigate to the Canvas after creating an offline model.
The Canvas displays the nodes and UI elements of the offline model.
Click the node on which you want to add the iFrame ID.
Select the node that represents the iframe element you want to configure.
The Test Design Configuration window appears.
In this window, click the Locator to update the iFrame ID (XPath) in the following format: XPath = //a[contains(.,'algoQA')] || <iFrame ID>.