JavaScript+Selenium如何在web中进行自动化测试（2）

草帽路飞UU

元素操作



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

　　(async function myFunction() {

　　  let driver = await new Builder().forBrowser('chrome').build();

　　  // 输入文字

　　  await driver.findElement(By.name('name')).sendKeys(name);

　　  // 点击

　　  await driver.findElement(By.css("input[type='submit']")).click();

　　  // 拖动元素到目标位置

　　  const actions = driver.actions({ bridge: true });

　　  const source = driver.findElement(By.id('source'));

　　  const target = driver.findElement(By.id('target'));

　　  await actions.dragAndDrop(source, target).perform();

　　  await driver.quit();

　　})();


　　其它操作

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

　　(async function myFunction() {

　　  let driver = await new Builder().forBrowser('chrome').build();

　　  // 返回当前URL

　　  await driver.getCurrentUrl();

　　  // 截图(返回base64编码的字符串)

　　  let encodedString = driver.takeScreenshot();

　　  await driver.quit();

　　})();


　　实例

　　下面我们使用百度来进行简单的演示, 具体流程如下:

　　1. 使用浏览器打开百度首页

　　2. 搜索"selenium"

　　3. 在结果列表中选择百度百科

　　4. 打开百度百科

　　效果如下:




代码如下:

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

　　(async function myFunction() {

　　  // 创建一个driver实例

　　  let driver = await new Builder().forBrowser('chrome').build();

　　  try {

　　    // 1. 跳转到百度

　　    await driver.get('https://baidu.com');

　　    // 2. 搜索

　　    let searchText = 'selenium';

　　    // 定位到搜索框, 并输入关键字

　　    await driver.findElement(By.id('kw')).sendKeys(searchText);

　　    await new Promise(res => setTimeout(res, 1000));

　　    // 定位到搜索按钮, 并点击

　　    await driver.findElement(By.id('su')).click();

　　    // 3. 从结果列表中选择百度百科

　　    let containers = await driver.wait(until.elementsLocated(By.className('c-container')), 2000);

　　    let targetElement = null;

　　    for (let container of containers) {

　　      let element = await container.findElement(By.css('h3>a'));

　　      let title = await element.getText();

　　      if (title.indexOf('百度百科') > -1) {

　　        targetElement = element;

　　        break;

　　      }

　　    }

　　    if (targetElement) {

　　      // 4. 打开百度百科

　　      await targetElement.click();

　　      // 切换window handle

　　      let windows = await driver.getAllWindowHandles();

　　      await driver.switchTo().window(windows[1]);

　　      await driver.wait(until.elementLocated(By.className('main-content')), 5000);

　　      await new Promise(res => setTimeout(res, 2000));

　　    }

　　  } catch (error) {

　　    console.error(error);

　　  } finally {

　　    // 关闭浏览器

　　    await driver.quit();

　　  }

　　})();



　　当然上例演示的只是Selenium强大功能的冰山一角, 仅为展示基本的运行情况。

　　总结

　　本文介绍了自动化测试以及Web应用自动化测试的一种方案: JavaScript+Selenium, 并用实例来展示了Selenium的部分功能. Selenium可以做的还有很多, 以后慢慢再探索。

　　需要注意的是,在实际项目中采用该方案时, 应配合mocha来编写。