【自动化测试】【Jest-Selenium】（04）—— Selenium WebDriver

1. Selenium WebDriver 是什么？

Selenium is an umbrella project（一揽子项目） for a range of tools and libraries that enable and support the automation of web browsers.

It provides extensions to emulate user interaction with browsers, a distribution server for scaling browser allocation, and the infrastructure for implementations of the W3C WebDriver specification that lets you write interchangeable code for all major web browsers.
At the core of Selenium is WebDriver, an interface to write instruction sets that can be run interchangeably in many browsers.

2. 安装？

Selenium Installation 分两步：

选择一种测试脚本编程语言（Java、JavaScript、Ruby 等）。（这里选的是 JavaScript）
安装与浏览器对应的 WebDriver 驱动包。（这里选的是 Chrome 版驱动）
- 下载地址：https://chromedriver.storage.googleapis.com/index.html
- 配置 WebDriver 驱动包的 PATH 变量

3. 编写脚本

3.1. 创建浏览器会话（Chrome）

const {Builder} = require('selenium-webdriver');

(async function myFunction() {
    let driver = await new Builder().forBrowser('chrome').build();
    //your code inside this block
})();

3.2. 页面导航控制（加载指定测试页面）

await driver.get('https://selenium.dev');

注：通常页面导航后，需要等到某个东西初始化完成，才能开始测试，所以需要用到 Selenium WebDriver 的 Waits 技能：‍

await driver.get('file:///race_condition.html');

// 等待检测到变量 initialised 为 true 时，再进行后续测试
await driver.wait(() => driver.executeScript('return initialised'), 10000);

const element = driver.findElement(By.css('p'));
assert.strictEqual(await element.getText(), 'Hello from JavaScript!');

3.3. 查找 DOM 元素

// Find Element
let searchBar = driver.findElement(By.name('q'));

// Find Elements
let elements = await driver.findElements(By.css('p'));
for(let e of elements) {
    console.log(await e.getText());
}

// Find Element From Element
WebElement searchForm = driver.findElement(By.tagName("form"));
WebElement searchBox = searchForm.findElement(By.name("q"));

// Find Elements From Element
let element = driver.findElement(By.css("div"));
let elements = await element.findElements(By.css("p"));
for(let e of elements) {
    console.log(await e.getText());
}

3.4. 获取元素属性

let element = await driver.findElement(By.css("div"));
const fontWeight = await element.getCssValue("font-weight"); // CSS 样式
const readonly = await element.getAttribute("readonly"); // 只读属性

3.5. 模拟键盘动作

sendKeys
- The sendKeys types a key sequence in DOM element even if modifier key sequence is encountered. Here are the list of possible keystrokes that WebDriver Supports.

const searchBtn = await driver.findElement(By.name('q'))
await searchBtn.sendKeys('webdriver', Key.ENTER);

clear
- Clears the content of an editable element. This is only applied for the elements which is editable and interactable, otherwise Selenium returns the error (invalid element state (or) Element not interactable)

3.6. 模拟鼠标动作

clickAndHold

let searchBtn = driver.findElement(By.linkText("Sign in"));
const actions = driver.actions({async: true});
// Perform mouseMove to element and mouseDown (press) action on the element
await actions.move({origin:searchBtn}).press().perform();

contextClick

let searchBtn = driver.findElement(By.linkText("Sign in"));
const actions = driver.actions({async: true});
// Perform context-click action on the element
await actions.contextClick(searchBtn).perform();

doubleClick

let searchBtn = driver.findElement(By.linkText("Sign in"));
const actions = driver.actions({async: true});
// Perform double-click action on the element
await actions.doubleClick(searchBtn).perform();

moveToElement

let gmailLink = driver.findElement(By.linkText("Gmail"));
const actions = driver.actions({async: true});
// Performs mouse move action onto the element
await actions.move({origin:gmailLink}).perform();

release

// Store 'box A' as source element
let sourceEle = driver.findElement(By.id("draggable"));
// Store 'box B' as source element
let targetEle = driver.findElement(By.id("droppable"));
const actions = driver.actions({async: true});
await actions.move({origin:sourceEle}).press().perform();
// Performs release event on target element
await actions.move({origin:targetEle}).release().perform();

3.7. alert 窗口控制

//Click the link to activate the alert
await driver.findElement(By.linkText('See an example alert')).click();

// Wait for the alert to be displayed
await driver.wait(until.alertIsPresent());

// Store the alert in a variable
let alert = await driver.switchTo().alert();

//Store the alert text in a variable
let alertText = await alert.getText();

//Press the OK button
await alert.accept();

‍

4. 效果展示

参考：

Selenium WebDriver 下载页： https://www.selenium.dev/documentation/en/webdriver/driver_requirements/ Chrome 版 WebDriver 下载地址： https://chromedriver.storage.googleapis.com/index.html Selenium WebDriver -> Waits： https://www.selenium.dev/documentation/en/webdriver/waits/