"Teach you by hand" series tips - java+ selenium automated testing - processing iframe - Part 1 (detailed tutorial)

Posted by JeDi58 on Thu, 11 Nov 2021 11:16:35 +0100

1. Introduction

It was estimated that brother Hong would not introduce and explain the knowledge point of iframe here, because the window switching in front provides ideas for this kind of web page processing. Another reason is that although iframe is very powerful, few websites use it now. However, some friends or children's shoes privately asked this question, so brother Hong wrote a separate article on iframe web page processing.

2. What is iframe

Iframe is our commonly used iframe tag: < iframe >. Iframe tag is a form of framework, which is also commonly used. Iframe is generally used to include other pages. For example, we can load the contents of other websites or other pages of our site on our own website page. The biggest function of iframe tag is to make the page beautiful. There are many uses of iframe tags. The main difference lies in the different forms of defining iframe tags, such as defining the length, width and height of iframe. In a simple sentence, iframe is used to nest web pages in HTML. A web page can be nested into another web page, and many layers can be nested. It's similar to Russian dolls.

3. How selenium handles iframe

// get into id call frameA of iframe
dr.switchTo().frame("frameA");

// Return to the main window
dr.switchTo().defaultContent();

4. Project practice

I haven't found such an example on the Internet for a long time. In the past, Baidu and 163 mailboxes were like this. The technology has been upgraded in recent years, which is no longer the case. I don't want to find brother Suo Hongge to make such a small demo locally for my friends or children's shoes to demonstrate.

Note: the data shown in this article can be returned to the macro brother 41 in the background of the official account, and be collected in the java+selenium->41 folder.

4.1 tested HTML code

1. Prepare the test exercise index.html as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Beijing-Hongge|iframeTestDemo</title>
    <style type="text/css">
        
        .button1 {
            background-color: #f44336; 
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 28px;
            margin-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body style="text-align:center">
<div id="wrapper" style="position: relative;top: 100px;left:0px;">
    <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">Beijing-Hongge</a></button></br>
    <div id="id1">I am a index page's div!</div>
    <input type="text" id="maininput" />
    <br/>
    <iframe id="frameA" frameborder="0" scrolling="no" style="left:857px;position:absolute;" src="iframe.html"></iframe>
</div>
</body>
</html>

2. Prepare the test exercise iframe.html as follows:

<!DOCTYPE html>
<html>
<head>
    <title>I am a iframe!</title>
</head>
<body>
    <div id="div1">I am iframes div!</div>
    <input id="iframeinput"></input>
</body>
</html>

3. Page effect, as shown in the figure below:

5. Code practice

5.1 code design

5.2 reference code

package lessons;

import java.util.concurrent.TimeUnit;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author Beijing - Hongge
 * 
 * <Teach you by hand series tips (41) - java+ selenium automated testing - processing iframe (detailed tutorial)
 *
 * 2021 November 7
 */
public class testIframe {
    
    @Test 
    public void testRadio() throws InterruptedException { 
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe");
        
        WebDriver driver =null;
        driver =new ChromeDriver();
        driver.get("file:///C:/Users/DELL/Desktop/test/iframe/index.html"); 
        driver.manage().window().maximize(); 
        driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS); 
        // In the main window
        driver.findElement(By.id("maininput")).sendKeys("This is a main input!");
        // No access to iframe, The following statement will report an error
        //driver.findElement(By.id("iframeinput")).sendKeys("iframe input");
                
        driver.switchTo().frame("frameA");
        driver.findElement(By.id("iframeinput")).sendKeys("This is a iframe input!");
        
        // If you are not in the main window at this time, the following statement will report an error
        //driver.findElement(By.id("maininput")).sendKeys("main input");
        
        // Return to the main window
        driver.switchTo().defaultContent();
        driver.findElement(By.id("maininput")).sendKeys("This is a main input!");  
        
    }

}

5.3 operation code

1. Run the code, right-click run as - > JUnit test, and the console will output, as shown in the following figure:

2. After running the code, the action of the browser on the computer side is shown in the following small video:

6. Summary

Well, it's getting late. I'll share it here today. Next, brother Hong will find an online web page with iframe to give a practical demonstration to his friends or children's shoes.

Programmer Think