目录1. Selenium WebDriver 是什么？2. 安装？3. 编写脚本    3.1. 创建浏览器会话(Chrome)    3.2. 页面导航控制(加载指定测试页面)    3.3. 查找 DOM 元素    3.4. 获取元素属性    3.5. 模拟键盘动作    3.6. 模拟鼠标动作    3.7. alert 窗口控制4. 效果展示

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 Elementlet searchBar = driver.findElement(By.name('q'));// Find Elementslet elements = await driver.findElements(By.css('p'));for(let e of elements) {    console.log(await e.getText());}// Find Element From ElementWebElement searchForm = driver.findElement(By.tagName("form"));WebElement searchBox = searchForm.findElement(By.name("q"));// Find Elements From Elementlet 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 elementawait 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 elementawait 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 elementawait actions.doubleClick(searchBtn).perform();

• moveToElement

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

• release

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

3.7. alert 窗口控制

//Click the link to activate the alertawait driver.findElement(By.linkText('See an example alert')).click();// Wait for the alert to be displayedawait driver.wait(until.alertIsPresent());// Store the alert in a variablelet alert = await driver.switchTo().alert();//Store the alert text in a variablelet alertText = await alert.getText();//Press the OK buttonawait 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/