web前端测试——e2e测试

开发环境:安装有node的macbook(windows没测)

第一步:

创建自己需要测试的项目,如在桌面创建一个test目录作为我们的项目根目录。

打开sublim text ,并将项目拖到sublim text中,方便管理。

web前端测试——e2e测试_第1张图片

第二步:

打开终端,输入命令cd Desktop/test进入到项目根目录,输入npm init ,一路回车生成package.json文件。

web前端测试——e2e测试_第2张图片

web前端测试——e2e测试_第3张图片

第三步:

配置package.json文件。

"e2e":"node ./e2e/index.js"

web前端测试——e2e测试_第4张图片

第四步:

在test目录下创建e2e文件夹,并在e2e文件夹下创建index.js文件。

index.js文件内容:

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

(async function example() {
  let driver = await new Builder().forBrowser('firefox').build();
  try {
    await driver.get('https://www.baidu.com/ 

');
    await driver.findElement(By.name 

('wd')).sendKeys('abc', Key.RETURN);
    await driver.wait(until.titleIs('abc_百度搜索'), 1000);
  } finally {
    await driver.quit();
  }
})();

web前端测试——e2e测试_第5张图片

web前端测试——e2e测试_第6张图片

第五步:

安装e2e需要的测试包:selenium-webdriver

npm install selenium-webdriver --save-dev

web前端测试——e2e测试_第7张图片

第六步:

添加测试浏览器所需要要的驱动,打开www.npmjs.com,输入selenium-webdriver点击打开selenium-webdriver下载使用说明。

web前端测试——e2e测试_第8张图片

web前端测试——e2e测试_第9张图片

选择自己需要测试的浏览器驱动,比如选择第一个chrome,点击进入下载页面

web前端测试——e2e测试_第10张图片

自己的电脑是什么系统就下载对应系统的驱动

web前端测试——e2e测试_第11张图片

下载完后解压,将解压后的小黑窗文件拖到你项目的根目录。

web前端测试——e2e测试_第12张图片

web前端测试——e2e测试_第13张图片

第七步:

在终端输入:npm run e2e进行测试。

web前端测试——e2e测试_第14张图片

注意事项:

一、安装测试需要的包:selenium-webdriver

二、index.js书写正确。

三、注意自己要测试的浏览器(chrome浏览器的版本多,我为了方便使用的是ff浏览器)

四、是否进入到项目目录进行安装。

五、驱动是否已经添加进项目。

六、需要测试的页面元素的name值,搜索值,得到的值。

 

你可能感兴趣的:(web前端学习)