前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【自动化测试】【Jest-Selenium】(04)—— Selenium WebDriver

【自动化测试】【Jest-Selenium】(04)—— Selenium WebDriver

作者头像
WEBJ2EE
发布2020-10-09 10:50:57
7970
发布2020-10-09 10:50:57
举报
文章被收录于专栏:WebJ2EE

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)

代码语言:javascript
复制
const {Builder} = require('selenium-webdriver');

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

3.2. 页面导航控制(加载指定测试页面)

代码语言:javascript
复制
await driver.get('https://selenium.dev');

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

代码语言:javascript
复制
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 元素

代码语言:javascript
复制
// 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. 获取元素属性

代码语言:javascript
复制
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.
代码语言:javascript
复制
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
代码语言:javascript
复制
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
代码语言:javascript
复制
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
代码语言:javascript
复制
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
代码语言:javascript
复制
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
代码语言:javascript
复制
// 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 窗口控制

代码语言:javascript
复制
//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/

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档