前端实现端到端测试(代码版)
端到端测试框架选取
- playwright 、 cypress 、 selenium 对比
cypress使用
- 下载 cypress
- npm install cypress --save-dev
- package.json
- npm run cypress:open
{"scripts": {"cypress:open": "cypress open"} }
使用流程
- 入门官方文档
-
npm run cypress:open
-
左侧端测试,右侧组件测试,点击左侧
-
选择你需要的浏览器,点击开始
-
自动打开浏览器,点击左侧specs(测试文件菜单),点击内容区域.cy.ts文件
-
左侧是测试执行栏,会有每个指令的详细信息以及成功失败,箭头可以点开看详细信息. 右侧是内容显示栏会有页面显示
code
- 每次it测试,触发窗口大小变化,然后登录,第一次会正常执行,然后保存登录状态,cy.session再次触发,如果登录过,会直接跳过
- 指令解析
- cy.visit 访问地址
- cy.origin 如果登录地址会先跳到一个login登录链接,登录完成再次回到业务链接时,域变化,需要加origin指令
- cy.get 得到dom元素, id class都支持
- dom元素后可以 click 点击 , type 填充内容, each 循环dom列表, first 第一个儿子等.
- cypress/support/commands.ts
- // Cypress.Commands.add(‘login’, (email, password) => { … })
- 登录方法可以封装成全局方法
- // Cypress.Commands.add(‘login’, (email, password) => { … })
- cypress/e2e/home-cypress.cy.ts
describe('template spec', () => {beforeEach(() => {cy.viewport(2000, 1000);cy.session('mySession', () => {cy.visit('https://xxxx');cy.get('#account').type('xxxx');cy.get('#password').type('xxxx');cy.get('.btn-login').click();});});it('login done', () => {cy.origin('https://xxxx', () => {cy.visit('https://xxxx/xxx');cy.on('uncaught:exception', (e) => {// 控制台报错会让测试停止,需要添加这段return false;});// cy.wait(500) 等待时间 , 直接写wait或者 get第二个参数填写timeoutcy.get('.ls-workstation-sidebar-avatar-name', { timeout: 30 * 1000 }).should('contain', '刘胜');cy.get('.ant-pro-form-collapse-button', { timeout: 30 * 1000 }).each(($el, index, $list) => {// $el is a wrapped jQuery elementcy.wrap($el).click();});cy.get('#contractNo', { timeout: 30 * 1000 }).type('PH0038417');const btnEles = cy.get('button.ant-btn-primary', { timeout: 30 * 1000 }).first().click();});}); });
selenium使用
- npm install selenium-webdriver
- npm install chromedriver --save
- npm下载以外还可以手动下载浏览器
使用流程
- 官方入门指南
- 写js文件, 用node执行此文件
- 会自动打开谷歌,然后自动执行代码
code
- 指令解析
- driver.get 导航到url
- driver.findElement(By.css()) dom元素, by.css里可以是id class
- sendKeys 填充内容, click点击, getText 得到文本内容
- driver.findElements dom元素列表
- tests/home-selenium.js
const {By, Builder, until} = require('selenium-webdriver'); const assert = require("assert");const driver = new Builder().forBrowser('chrome').build();(async function () {// 导航到某个网站await driver.get('https://xxx/xxx');driver.findElement(By.css('#account')).sendKeys('ddd');driver.findElement(By.css('#password')).sendKeys('aaa');await driver.findElement(By.css('.btn-login')).click();const avatarName = await driver.wait(until.elementLocated(By.className('ls-sidebar-avatar-name')),30000,);// 等待得到这个dom,超时时间30000msconst avatarText = await avatarName.getText();assert(avatarText === '清羽', 'login done');// 断言const contractNoEle = await driver.wait(until.elementLocated(By.css('#contractNo')), 30000);contractNoEle.sendKeys('PC00398414');const collapseEles = await driver.findElements(By.css('.ant-pro-form-collapse-button'));for (const ele of collapseEles) {ele.click();}const btnEles = await driver.findElements(By.css('button.ant-btn-primary'));let index = 0;for (const ele of btnEles) {if (index == 0) {ele.click();}index++;}// 关闭浏览器// await driver.quit(); })();