[Software testing/automated testing] WebDriver+Selenium realizes browser automation

foreword

scenes to be used

principle

Environmental preparation

foreword

Selenium is an open source project that can automate the operation of browsers. The original purpose is to automate the testing of browser functions, but with the development of the project, people also use it to do some more interesting functions according to its characteristics. It is an automated testing tool for UI. As described on the official Selenium website, Selenium can automate browser manipulation. It's over! What you want to do with its abilities is entirely up to you.

scenes to be used

There are three scenarios for automated testing of browsers:

Selenium WebDriver: If you want to create robust, browser-based regression automation suites and tests, scale and distribute scripts across many environments, then you need to use Selenium WebDriver, a set of language-specific bindings to drive browsers - that's what it's meant to drive
Selenium IDE: If you want to create quick bug-reproduction scripts, create scripts to help automate exploratory testing, then you want to use Selenium IDE; Chrome, Firefox, and Edge plugins that allow simple logging and play back
Selenium Grid: If you want to scale and manage multiple environments from a central point by distributing and running your tests on multiple machines so that you can easily run tests against a large number of browser/OS combinations then you need to use Selenium Grid

principle

The purpose of early Selenium was to realize UI automation testing of web applications. The implementation method was to inject js through a three-party server to achieve the purpose of controlling browser behavior. The core component is called Selenium-RC (Remote Control), which consists of two parts:

A library for writing control browser logic on the client side
Implements a server that controls browser startup and shutdown

The structure is as follows

This architecture proved to be complex and had many limitations, such as:

complex architecture
Executing test scripts is time-consuming because Selenium RC uses JavaScript commands as instructions for the browser. This can lead to poor performance
API is not very object-oriented
Headless HTMLUnit browsers are not supported (invisible browsers)

The limitations of Selenium RC led to the development of a new automation framework, Selenium WebDriver. After the introduction of WebDriver in 2006, the complex problems in RC can be solved and solved. Selenium combined with WebDriver simplifies the control behavior of the browser, removes the server in the middle link, and directly controls the browser locally at the system level. The optimized architecture as follows:

Environmental preparation

If you don't want to implement your functions at the coding layer, you can download the Selenium IDE plug-in, which supports recording playback and process script export.

If you need to implement more flexible custom functions through code, it is recommended to use python, and prepare python3 and pip3 for the environment

brew install python3

selenium

pip3 install selenium

install browser drivers sets up your system to allow browser automation. Through WebDriver, Selenium supports all major browsers in the market, such as Chrome/Chromium, Firefox, Internet Explorer, Edge, Opera and Safari. Where possible, WebDriver uses the browser's built-in automation support to drive the browser

to develop

First Script

Control browser automatic access function through webdriver

def test_eight_components():
    driver = webdriver.Chrome()
    
    driver.get("https://google.com")
    
    title = driver.title
    assert title == "Google"
    
    driver.implicitly_wait(0.5)
    
    search_box = driver.find_element(by=By.NAME, value="q")
    search_button = driver.find_element(by=By.NAME, value="btnK")
    
    search_box.send_keys("Selenium")
    search_button.click()
    
    search_box = driver.find_element(by=By.NAME, value="q")
    value = search_box.get_attribute("value")
    assert value == "Selenium"
    
    driver.quit()

WebDriver API

webDriver's API for manipulating the browser can be roughly divided into two parts, controlling browser behavior such as opening, closing, forward, backward, refreshing, etc., and controlling page elements such as clicking, input, and obtaining element content, etc.

browser

Get browser information

// title driver.getTitle(); // url driver.getCurrentUrl();

navigation

//打开
driver.get("https://selenium.dev");

//跳转
driver.navigate().to("https://selenium.dev");

// 后退
driver.navigate().back();

// 前进
driver.navigate().forward();

// 刷新
driver.navigate().refresh();

bullet box

//根据条件找到页面中的弹框并点击
driver.findElement(By.linkText("See an example alert")).click();

//等待弹框展示并保存到变量中
Alert alert = wait.until(ExpectedConditions.alertIsPresent());

//获得弹框内容文本
String text = alert.getText();

//点击确定按钮
alert.accept();

Alert, Confirm, Prompt functions similar to Cookies can support the addition and deletion of cookies

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

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

            // Adds the cookie into current browser context
            driver.manage().addCookie(new Cookie("key", "value"));
        } finally {
            driver.quit();
        }
    }
}

Frames support the acquisition and operation of elements in Frames. Windows WebDriver does not distinguish between windows and tabs. If your site opens a new tab or window, Selenium will allow you to use the window handle to handle it. Each window has a unique identifier that remains constant within a single session. You can get the window handle of the current window with:

driver.getWindowHandle();

element

Identifying and Using Elements in the DOM Much of anyone's Selenium code involves working with web elements. This part of the function is similar to the document.getElementById of writing the front-end code. The idea is relatively simple. It is to find the elements in the page and then perform the operation of simulating user behavior. It supports absolute positioning and relative positioning strategies. It is not good for complex page IDs, Tags, and Classes. You can use the xPath method for positioning, which is very flexible. In fact, you don’t need to memorize it by rote. When a certain element is not easy to locate, you can go to the official website to check the API to achieve it.

relative positioning

def relative():
    # Above
    email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
    # Below
    password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
    # Left of
    cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})
    # Right of
    submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})
    # Near
    email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
    # Chaining relative locators
    submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})

traditional positioning

<ol id="vegetables" style="margin-top: 20px">
      <li class="potatoes">potatoes</li>
      <li class="onions">onions</li>
      <li class="tomatoes"><span>Tomato is a Vegetable</span></li>
    </ol>
    <ul id="fruits">
      <li class="bananas"></li>
      <li class="apples"></li>
      <li class="tomatoes"><span>Tomato is a Fruit</span></li>
     </ul>


def finders():
    # Evaluating entire DOM
    vegetable = driver.find_element(By.CLASS_NAME, "tomatoes")
    print(vegetable)
    # Evaluating a subset of the DOM
    fruits = driver.find_element(By.ID, "fruits")
    fruit = fruits.find_elements(By.CLASS_NAME, "tomatoes")
    print(fruit)
    # Optimized locator
    fruit = driver.find_element(By.CSS_SELECTOR, "#fruits .tomatoes")
    fruit2 = driver.find_element(By.CSS_SELECTOR, "ul .tomatoes")
    print(fruit == fruit2) # True
    # All matching elements
    plants = driver.find_elements(By.TAG_NAME, "li")
    print(plants)
    # Get all the elements available with tag name 'p'
    elements = driver.find_elements(By.TAG_NAME, 'span')
    for e in elements:
        print(e.text)


def xPath():
    ol = driver.find_element(By.XPATH, "/html/body/div/div/ol[1]")
    ol2 = driver.find_element(By.XPATH, "//ol[1]")
    ol3 = driver.find_element(By.XPATH, "//ol[@id='vegetables']")
    print(ol == ol2) # True
    print(ol == ol3) # True
    onions = driver.find_element(By.XPATH, "//ol[1]/li[2]")
    print(onions.text)

Interact with 5 basic commands:

click (any element)
send keys (only for text blocks and content editable elements)
clear (same as above)
submit (form element)
select (select list element)

Get element information

Summarize

This sharing introduces Selenium usage scenarios, simple principles and some basic usages. And gave a small example. After mastering the above content, you can already implement basic UI automation testing. In addition, the requirements for tools that can do some crawlers and automate browser manipulation need to be customized according to individual scenarios. As long as you have a "lazy" nature, I believe you will find a lot of interesting scenarios to use it.

-There must be a way, and then there will be success- Finally, I wish everyone to reach the ceiling of the test as soon as possible!

If you don’t want to grow wildly alone, can’t find system information, can’t get help for problems, and give up after persisting for a few days, you can join our Q skirt : 321255410, or click the small card below to add , everyone You can discuss and communicate together, and there will be various software testing materials and technical exchanges.

Today I mainly share with you some of my learning experience and network disk learning resources. I will continue to share some relevant test materials in the future. If you have friends who have been helped, you can like and support them~