1. Selenium WebDriver 是什么?
Selenium is an umbrella project(一揽子项目) for a range of tools and libraries that enable and support the automation of web browsers.
2. 安装?
Selenium Installation 分两步:
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. 模拟键盘动作
const searchBtn = await driver.findElement(By.name('q'))
await searchBtn.sendKeys('webdriver', Key.ENTER);
3.6. 模拟鼠标动作
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();
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();
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();
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();
// 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/