Selenium UI Automation

1. Selenium Automation

1. What is Selenium?

Selenium is a UI-based automated testing framework for web applications.

2. What are the characteristics of Selenium?

Supports multiple platforms, multiple browsers, and multiple languages.

3. How does automation work?

Through the picture above, we can notice three roles, which are explained in detail below:

• Automation script: For java, it is a test script written using WebDriver API. Used to send to browser driver.
• Browser driver (browser driver): Each browser has its own driver, which exists in the form of exe file. For example, Google's chromedriver.exe, Firefox's geckodriver.exe, and IE's IEDriverServer.exe. It parses the codes of these automated tests and sends them to the browser after parsing.
• Browser: Browsers are of course the various commonly used browsers that we are familiar with. Execute the instructions sent by the browser driver and finally complete the operation the engineer wants.

Combined with the above picture, we can further understand:

1. For each Selenium script, an http request is created and sent to the browser driver.
2. The browser driver contains an HTTP Server to receive these http requests.
3. After receiving the request, the HTTP Server specifically controls the corresponding browser according to the request.
4. The browser performs specific testing steps.
5. The browser returns the step execution results to the HTTP Server.
6. The HTTP Server returns the result to the Selenium script. If it is an incorrect http code, we will see the corresponding error message on the console.

2. Configure Selenium automatic testing environment (Java)

1. Chrome. Download address: https://www.google.cn/intl/zh-CN/chrome/
2. Chrome’s driver (ChromeDriver). Note that the driver version must match your Chrome browser version. Download address: https://chromedriver.chromium.org/downloads
3. Selenium3 toolkit. Maven warehouse import dependencies: https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java/3.141.59

Write the first Selenium Demo:

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度
        webDriver.get("https://www.baidu.com");
    }

3. Commonly used WebDriver API learning

1. Element positioning

The positioning of the element should be the core of automated testing. If you want to operate an object, you should first identify the object. Webdriver provides two types: findElement() and findElements() The method is used with the object positioning method to position the element. Webdriver provides a series of object positioning methods: id, name, class name, link text, partial link text, tag name, xpath, css selector. There are two main types commonly used in our actual tests:

(1) css positioning: css selector

CSS positioning is based on CSS selectors. We can locate page element content by searching for selectors in the page. For example, common ones include id selector: #id, class selector: .class, tag selector: tag name, descendant selector: parent tag and child tag.

(2) xpath positioning: xpath

XPath is a language for locating elements in XML documents. The function is relatively powerful, but the syntax is complicated. If you want to learn systematically, the recommended website is W3school. Here is a brief introduction to its basic use:

1. Use absolute paths to locate elements:/html/head/title The meaning of the entire expression is to start from the root element of the document, select its child element html, and then select The child element head, and finally select the child element title under the head element

2. Relative path + index://form/span[1]/input This expression means starting from the root node, find all elements named "form", and then in each Find the first span element among the form elements, and find the input element under the span element. This method uses indexing to specify the exact location of the desired element.

3. Relative path + attribute value://input[@class="s_ipt"] This XPath expression is used to select all tags named input and the value of the class attribute is "s_ipt" ;Elements. The @ symbol is used to reference attributes so that elements can be positioned based on their value.

4. Relative path + wildcard://[@="su"] This XPath expression uses the wildcard * to select all documents containing attribute names containing the specified string "su" Elements. This method can be used to locate elements with specific attributes, regardless of which element they are.

5. Relative path + text matching://a[text()="新闻"] This expression selects all elements with the tag name a and the text content "News". Use the text() function within parentheses to specify the text content that needs to be matched.

(3) Which is better, css positioning or xpath positioning?

If the main task is to define styles and layouts in web development, then CSS selectors will be more suitable; and if complex XML document processing is required or finer node positioning is required, XPath selectors are more suitable. In addition, CSS selectors are specially designed for HTML documents, and browsers will efficiently optimize CSS selectors when parsing and rendering HTML pages.

PS: In the actual test, you can open the developer tools and select page elements. You can quickly get the css/xpath positioning of the element by right-clicking the mouse.

2. Manipulate test objects

• click()Click object
• sendKeys()Simulate key input on an object
• clear()Clear the input in the object
• submit()Object submission

Note: If the clicked element is placed in a form tag, using submit will have the same effect as click; if the clicked element is placed in a non-form tag, using submit will report an error.

public class Main {
    
    
    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度
        webDriver.get("https://www.baidu.com");
        sleep(1000);
        // 在输入框模拟键盘输入
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("csdn不摸鱼的程序员");
        sleep(1000);
        // 点击"百度一下"
        webDriver.findElement(By.cssSelector("#su")).click();
        sleep(1000);
        // 清除输入框
        webDriver.findElement(By.cssSelector("#kw")).clear();
        sleep(1000);
        // 点击第一条搜索结果
        webDriver.findElement(By.cssSelector("#\\31  > div > div:nth-child(1) > h3 > a")).click();
    }
}

Results display:

3. Add waiting

(1) Forced waiting

We have used sleep() in the above code. sleep() is a forced wait, and it will wait according to the time parameters inside.

(2) Implicit waiting

public class ImplicitlyWaitExample {
    
    
    public static void main(String[] args) {
    
    
        WebDriver driver = new ChromeDriver();
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);  // 设置隐式等待时间为10秒
        driver.get("https://www.example.com");

        // 后续操作
        // ...

        driver.quit();
    }
}

In the above example, we use driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS) to set the implicit wait time to 10 seconds. This way, when looking for an element or executing a command, WebDriver waits for a certain amount of time until the element appears or times out.

Note:
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS) is placed after the ChromeDriver instance is created, but before any actual testing steps are performed. This ensures that the implicit wait setting is applied throughout the test to wait while elements are found. It's worth noting that the implicit wait only needs to be set once, usually immediately after the WebDriver instance is created. This setting will take effect on subsequent element lookups throughout the test execution until the WebDriver instance is closed or the implicit wait setting is cleared.

(3) Explicit wait

public class WebDriverWaitExample {
    
    
    public static void main(String[] args) {
    
    
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");

        // 使用显式等待等待元素可点击
        WebDriverWait wait = new WebDriverWait(driver, 10);
        WebElement button = wait.until(ExpectedConditions.elementToBeClickable(By.id("myButton")));
        button.click();

        // 后续操作
        // ...

        driver.quit();
    }
}

In the above example, we used WebDriverWait combined with ExpectedConditions,wait until specific conditionsContinue execution after it occurs. Here we wait for the element to be clickable before clicking on it

4. Information acquisition

• getText()The method is used to obtain the text content displayed by the web page element, which usually refers to the visible text inside the element.
• getAttribute()The method is used to obtain the value of the specified attribute of the element, such as id, name, class, etc.

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度
        webDriver.get("https://www.baidu.com");
        sleep(1000);
        // 获取百度词条文本
        String text = webDriver.findElement(
                By.cssSelector("#hotsearch-content-wrapper > li:nth-child(1) > a > span.title-content-title")).getText();
        System.out.println("元素内文本："+text);
        sleep(1000);
        // 获取输入框name
        String name = webDriver.findElement(By.cssSelector("#kw")).getAttribute("name");
        System.out.println("元素属性 name："+name);
    }

• getCurrentUrl()The method is used to obtain the URL address of the page where the current browser is located.

• getTitle()The method is used to get the title of the current page, that is, the page tag (

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度
        webDriver.get("https://www.baidu.com");
        sleep(1000);
        // 获取百度url
        String url = webDriver.getCurrentUrl();
        System.out.println("百度 url："+url);
        sleep(1000);
        // 获取百度title
        String title = webDriver.getTitle();
        System.out.println("百度 title："+title);
    }

5. Mouse operation

• click()Click: Simulates a left-click mouse action, which can be used to click links, buttons, or other interactive elements.
• doubleClick()Double-click: Simulates a double-click operation with the left mouse button and can be used in specific double-click interaction scenarios.
• contextClick()Right-click: Simulates a right-click mouse operation, which can trigger context menus or other right-click interaction effects.
• moveToElement()Hover: Move the mouse to the specified element and hover it, which can be used to trigger the display of hover menu or prompt information.
• dragAndDrop()Drag-and-drop: Simulates a mouse drag operation, usually used to achieve drag-and-drop interactive effects.

The Actions class represents user interaction actions. It is used to construct and execute user's mouse, keyboard and other operations on the web page.

public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver driver = new ChromeDriver();
        // 访问百度
        driver.get("https://www.baidu.com");
        sleep(1000);
        // 获取到百度一下按钮
        WebElement element = driver.findElement(By.cssSelector("#su"));
        // 初始化 action
        Actions actions = new Actions(driver);
        // 点击操作
        actions.click(element).perform();
        sleep(1000);

        // 获取底部元素
        WebElement element1 = driver.findElement(By.cssSelector("#bottom_layer > div > p:nth-child(8)"));
        // 双击操作
        actions.doubleClick(element1).perform();
        sleep(1000);

        // 获取“图片”文字
        WebElement element2 = driver.findElement(By.cssSelector("#s-top-left > a:nth-child(6)"));
        // 右键点击操作
        actions.contextClick(element2).perform();
        sleep(1000);

        // 获取到百度logo
        WebElement element3 = driver.findElement(By.cssSelector("#lg > map > area"));
        // 悬停操作
        actions.moveToElement(element3).perform();
        sleep(1000);

        // 模拟拖放操作(从底部移动到顶部)
        WebElement sourceElement = driver.findElement(By.cssSelector("#bottom_layer > div > p:nth-child(1) > a"));
        WebElement targetElement = driver.findElement(By.cssSelector("#s-top-left > a:nth-child(1)"));
        actions.dragAndDrop(sourceElement, targetElement).perform();
        sleep(1000);

        actions.click().perform();
        sleep(1000);

    }

PS: In Selenium, the perform() method is used to execute a previously defined sequence of actions. When you use the Actions class to build a series of mouse or keyboard operations, these operations are not executed immediately, but they are put into an action sequence. Selenium will perform these operations in the order you define only when the perform() method is called. The benefit of this design approach is that you can build complex sequences of mouse and keyboard operations and then execute them all at once.

6. Keyboard operation

• sendKeys(Keys.TAB) // TAB
• sendKeys(Keys.ENTER) // Enter
• sendKeys(Keys.SPACE) // Space key
• sendKeys(Keys.ESCAPE) // Escape key (Esc)
• sendKeys(Keys.CONTROL,“a”) // Select all (Ctrl+A)
• sendKeys(Keys.CONTROL,“c”) // Copy (Ctrl+C)
• sendKeys(Keys.CONTROL,“x”) // Cut and paste (Ctrl+X)
• sendKeys(Keys.CONTROL,“v”) // Paste (Ctrl+V)

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver driver = new ChromeDriver();
        // 访问百度
        driver.get("https://www.baidu.com");
        sleep(2000);
        // 获取到百度搜索框
        WebElement element = driver.findElement(By.cssSelector("#kw"));
        // 输入内容-》输入空格-》输入内容-》输入TAP-》输入内容-》回车键
        element.sendKeys("不摸鱼");
        sleep(1000);
        element.sendKeys(Keys.SPACE);
        sleep(1000);
        element.sendKeys("的");
        sleep(1000);
        element.sendKeys(Keys.TAB);
        sleep(1000);
        element.sendKeys("程序员");
        sleep(1000);
        element.sendKeys(Keys.ENTER);

        // 全选-》剪贴-》粘贴
        element.sendKeys(Keys.CONTROL,"a");
        sleep(1000);
        element.sendKeys(Keys.CONTROL,"x");
        sleep(1000);
        element.sendKeys(Keys.CONTROL,"v");
        sleep(1000);
    }

7. Browser operation

• webDriver.navigate().forward(): This statement is used to let the browser navigate forward, that is, go to the next page in the browsing history.
• webDriver.navigate().back(): Contrary to forward(), this statement is used to return the browser to the previous page in the browsing history.
• webDriver.manage().window().maximize(): This is the operation used to maximize the browser window.
• webDriver.manage().window().setSize(new Dimension(width, height)): This statement is used to set the size of the browser window. You can specify the required width and height parameters to resize the browser window to suit different testing scenarios or needs.
• window.scrollTo(0, document.body.scrollHeight) Js script, to scroll to the bottom of the page. (The first parameter is the horizontal scroll position, the second parameter is the vertical scroll position)
• window.scrollTo(0, 0) Js script, to scroll to the top of the page.

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver driver = new ChromeDriver();
        // 访问百度
        driver.get("https://www.baidu.com");
        sleep(2000);
        // 获取到百度搜索框
        WebElement element = driver.findElement(By.cssSelector("#kw"));
        // 搜索“软件测试”
        element.sendKeys("软件测试");
        sleep(1000);
        element.sendKeys(Keys.ENTER);
        sleep(1000);
        // 返回百度首页
        driver.navigate().back();
        sleep(1000);
        // 返回软件测试搜索页
        driver.navigate().forward();
        sleep(1000);
        // 自定义浏览器窗口
        driver.manage().window().setSize(new Dimension(500,500));
        sleep(1000);
        // 实现浏览器窗口最大化
        driver.manage().window().maximize();
        sleep(1000);
        // 实现滚动到页面底部
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
        sleep(1000);
        // 实现滚动到页面顶部
        js.executeScript("window.scrollTo(0, 0)");
        sleep(1000);
    }

8. Pop-up window operation

Alert pop-up window, confirmation box (Confirm), prompt box (Prompt):

• switchTo().alert(): Used to switch to the warning box on the page and return an Alert object. You can use this object to accept, cancel, or enter text into the warning box.
• alert.accept(): Used to accept the warning box (click the "OK" button).
• alert.dismiss(): Used to cancel the warning box (click the "Cancel" button).
• alert.sendKeys("your_text"): Used to enter text in the warning box.

The following uses the Prompt prompt box as an example to demonstrate:

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("http://localhost:63342/autoTest/src/main/page/alert.html?_ijt=g52rrlh3gfrag8ivs5g3ec40c0");
        sleep(1500);
        // 点击弹窗按钮
        webDriver.findElement(By.cssSelector("body > button")).click();
        sleep(1000);
        // 切换到页面上的警告框
        Alert alert = webDriver.switchTo().alert();
        // 点击取消
        alert.dismiss();
        sleep(1000);
        // 再次点击按钮
        webDriver.findElement(By.cssSelector("body > button")).click();
        sleep(1000);
        // 输入“不摸鱼”
        alert = webDriver.switchTo().alert();
        alert.sendKeys("不摸鱼");
        sleep(1000);
        // 点击确定
        alert.accept();
        sleep(1000);
    }

9. Option operation

Radio Button operation:

• Radio buttons are handled through WebElement objects.
• click(): Click to select the radio button.

Checkbox operation:

• Check boxes are handled through WebElement objects.
• click(): Click to toggle the checked state of the check box.

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("http://localhost:63342/autoTest/src/main/page/choice.html?_ijt=fc7i1795ada371afdv81v0iqk2");
        sleep(1500);
        // 选择并点击2/3两个复选框
        WebElement box1 = webDriver.findElement(By.cssSelector("#c2"));
        box1.click();
        sleep(1000);
        WebElement box2 = webDriver.findElement(By.cssSelector("#c3"));
        box2.click();
        sleep(1000);
        // 选择第二个单选框
        WebElement choice = webDriver.findElement(By.cssSelector("#r2"));
        choice.click();
        sleep(1000);
    }

10. Drop-down box operation

Handle drop-down boxes through the Select class:

• selectByVisibleText("visible_text"): Make a selection based on the visible text of the drop-down option.
• selectByValue("value"): Select based on the value of the drop-down option.
• selectByIndex(index): Select based on the index of the drop-down option (starting from 0).

    public static void main(String[] args) throws InterruptedException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("http://localhost:63342/autoTest/src/main/page/pulldown.html?_ijt=bjk05362bbitst3j1nrntnnrn9");
        sleep(1500);
        // 定位下拉框按钮
        WebElement shippingMethod = webDriver.findElement(By.name("ShippingMethod"));
        sleep(1000);
        // 定义select对象
        Select select = new Select(shippingMethod);
        // 根据索引选择第3个
        select.selectByIndex(2);
        sleep(1000);
        // 根据属性孩子选择value=11.61
        select.selectByValue("11.61");
        sleep(1000);
    }

11. Upload files

WebElement.sendKeys(): This is the method used to send the file path to the input element. You can find the file input element, then call the sendKeys() method and pass the absolute path of the file as a parameter to implement the file upload operation.

    public static void main(String[] args) throws InterruptedException, IOException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("http://localhost:63342/autoTest/src/main/page/upload.html?_ijt=bhatof5910d1h8q6675j3jjoa5");
        sleep(1500);
        // 上传图片
        WebElement uploadFile = webDriver.findElement(By.cssSelector("body > input[type=file]"));
        uploadFile.sendKeys("D:\\博客图片\\MyBlog\\java.png");
        sleep(1000);
    }

12. Screenshot

The screenshot operation requires importing Commons-io dependencies: https://mvnrepository.com/artifact/commons-io/commons-io/2.11.0

Then call the method in the TakesScreenshot interface:getScreenshotAs()

    public static void main(String[] args) throws InterruptedException, IOException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("https://www.baidu.com");
        sleep(1500);
        // 搜索“不摸鱼的程序员”
        webDriver.findElement(By.cssSelector("#kw")).sendKeys("不摸鱼的程序员-csdn");
        webDriver.findElement(By.cssSelector("#su")).click();
        sleep(3000);
        // 截图
        File file = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.FILE);
        // 将图片保存到硬盘
        FileUtils.copyFile(file, new File("D://20231111.png"));
    }

13. iframe frame positioning

If an iframe is used in a web page, elements inside the frame cannot be positioned directly. You need to switch to the corresponding iframe first to perform the positioning operation:

• webDriver.switchTo().frame(): This is the main method in Selenium for switching to a specified iframe. You can index by , ID, NameorWebElement object to specify the iframe to switch to.
• webDriver.switchTo().parentFrame(): You can use this method when you need to return from the iframe to its upper-level context.
• webDriver.switchTo().defaultContent(): Use this method if you need to return to the outermost page context from all nested iframes.

    public static void main(String[] args) throws InterruptedException, IOException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问
        webDriver.get("http://localhost:63342/autoTest/src/main/page/iframe.html?_ijt=hiqvtbuga50aga3831ql9nu2ph");
        sleep(1500);
        // 切换到 iframe:f1
        webDriver.switchTo().frame("f1");
        // 点击内部的click
        webDriver.findElement(By.cssSelector("body > div > div > a")).click();
        sleep(1000);
    }

14. Multi-window positioning

Before explaining multi-window positioning, let’s first understandwindow handle：

A window handle is a unique identifier used to identify a window at the operating system level. In Selenium, window handles are usually used to identify browser windows or tabs and allow us to switch and operate between multiple windows. When you open a new tab or window in your browser, each window has its own unique handle. By obtaining these handles, Selenium can help you track and manage different windows, allowing you to switch between multiple windows, locate elements, and perform operations.

Selenium provides the following APIs for operating windows:

• Get the current window handle: Use the driver.getWindowHandle() method to get the handle of the current window.
• Get all window handles: Use the driver.getWindowHandles() method to get the handles of all open windows.
• Switch window: Use the driver.switchTo().window(windowHandle) method to switch to the specified window.

    public static void main(String[] args) throws InterruptedException, IOException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度(注：此时窗口句柄在百度首页，webDerive的所有操作只能针对首页)
        webDriver.get("https://www.baidu.com");
        sleep(1500);
        // 打开百度图片窗口
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(6)")).click();
        sleep(1000);
        // 先将窗口句柄切换到百度图片窗口
        // 1.获取所有窗口句柄
        Set<String> windowHandles = webDriver.getWindowHandles();
        // 2.找到最后一个句柄即为百度图片窗口句柄
        String imageHHandle = "";
        for (String handle : windowHandles) {
    
    
            imageHHandle = handle;
        }
        // 3.切换到百度图片窗口
        webDriver.switchTo().window(imageHHandle);
        // 点击百度图片窗口中的头像标签
        webDriver.findElement(By.cssSelector("#wrapper_head_box > div > div > div > div > div.hotquery > a:nth-child(3)")).click();
        sleep(1000);
    }

15. Browser closing operation

• webDriver.close()Closing the currently focused browser window does not clear the session and cache.
• webDriver.quit()Closing all browser windows will clear the session and cache.

    public static void main(String[] args) throws InterruptedException, IOException {
    
    
        // 创建浏览器驱动
        WebDriver webDriver = new ChromeDriver();
        // 访问百度(注：此时窗口句柄在百度首页，webDerive的所有操作只能针对首页)
        webDriver.get("https://www.baidu.com");
        String mainHandle = webDriver.getWindowHandle(); // 获取首页句柄
        sleep(1500);
        // 打开百度图片窗口
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(6)")).click();
        sleep(1500);
        // 切换到主页（这个操作只是为了将显示页面切换到首页，句柄还是首页）
        webDriver.switchTo().window(mainHandle);
        sleep(1500);
        // 打开百度贴吧窗口
        webDriver.findElement(By.cssSelector("#s-top-left > a:nth-child(4)")).click();
        sleep(1500);
        // 关闭当前聚焦页面(注：由于此时窗口句柄为百度首页，所以此时close()会关闭首页，而不是百度图片页)
        webDriver.close();
        sleep(1500);
        // 关闭浏览器
        webDriver.quit();
    }