10 minute quick start UI automation ----- puppeter

This time, I will introduce you to the internal implementation UI A scheme of automated testing ： Puppeteer+Mocha

Currently used for transferring books 、 luxury goods 、 Business and other businesses Web/H5 Online process monitoring of business ;

Just a quick introduction ：

Mocha  yes JavaScript A unit testing framework of

Puppeteer  It's a Node library , It offers an advanced API To pass DevTools Protocol control Chromium

Compared with the familiar Appium programme , adopt Appium The server Control connected mobile devices Conduct UI operation

Puppeteer+Mocha  The plan , Is in the Mocha In frame Write some js Code , call Puppeteer Start a browser and manipulate it to complete your UICase The operation of

If a worker wants to do a good job, he must sharpen his tools first , First, install the necessary tools

1. install node

• https://nodejs.org/zh-cn/download/ Download and install directly

• Configure environment variables

• View version ：

node -v

2. install npm （node It will be installed automatically npm, If installed node, Please ignore this step )

Install the latest version ：

npm install [email protected] -g

View version ：

npm -v

3. install cnpm (npm Failed to download package , choice cnpm install )

Carry out orders ：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org （ Set Taobao image ）

verification :

cnpm -v 

4. Create a new one node engineering

npm i --save express

The root directory will appear : package.json、package-lock.json and node_modules  Folder

Installation works depend on package.json increase mocha、puppeteer Version information

"mocha": "^8.3.2",
"puppeteer": "^1.18.0",

 And then execute   The following command , install puppeteer and mocha

npm install

The tools are installed ,case Write it down ！！

First try the ox knife , Write a simple demo

Create a js file , Write the following code

const puppeteer = require('puppeteer');

async function test()

{

//  Create a browser instance  Browser  object 

  const browser = await puppeteer.launch({

    args: ['--no-sandbox', '--disable-setuid-sandbox'], // Open headless 

    headless:false,

    ignoreHTTPSErrors: true,

  });

//  Through the browser instance  Browser  Object creation page  Page  object 

  const page = await browser.newPage();

//  adopt url Parameter to open the specified page 

  await page.goto('[https://m.zhuanzhuan.com/open/ZZBook/index.html?needHideHead=3#/book-home](https://m.zhuanzhuan.com/open/ZZBook/index.html?needHideHead=3#/book-home)');

//  Take a screenshot of the page 

  await page.screenshot({path: 'homePage.png'});

//  Close the browser 

  await browser.close();

};

module.exports = test

test()

Run the demo, You have completed a simple UICase

Then we can demo Edit your own based on case

• First step ： Get the of the element you want to operate selector

  • On the browser page Press F12 Open the debugging tool perhaps Right mouse button menu - Click on “ Check ”, View the page control tree

  • Choose the corresponding element , In the control tree - Right mouse button - Copy copy -selector

• The second step ： According to the following corresponding puppeteer Corresponding api, Enrich your uicase The operation of

// Page back 
page.goBack([options])

// wait for xx Elements 
page.waitForSelector(selector[, options])

// Jump 
page.goto(url[, options])

// Set up cookies
page.setCookie(...cookies)

// Touch click operation 
page.tap(selector)

// Mouse click operation 
page.click(selector[, options])

//Puppeteer Chinese Manual 
//https://zhaoqize.github.io/puppeteer-api-zh_CN/

 Repeat the above two steps , You can realize your own UICase La 

In addition, share a little white welfare Chrome plug-in unit ：puppeteer recorder

It can automatically record the operation on the page , Generate puppeteer Code

• visit https://cloud.tencent.com/developer/article/1470481  Download plug-ins

• The installation to Chrome In the expansion program , Turn it on

  

• After opening , In the upper right corner of the browser, there is a label of the video recorder , Click it and start recording , Window display Recording...

  

• Operate the page to execute your case technological process , After the operation, click the video recorder icon , Stop recording , Copy build puppeteer The code can be

  

case I can already write , So we use mocha The test framework will case Execute gracefully

because mocha Default execution test A file in a directory , So in test Create a new one in the directory caseList.js, As an executive document The file format is as follows ：

const case1 = require('../cases/demo')

// describe Define the test suite name 
describe(' Use case set ',function() {

  before(function() {console.log(' Start to execute the use case ')});
  
  // it Define a single test case 
  it('case1',async function() {

    [//this.timeout](//this.timeout)(0);

    await case1();});

  it('case2',async function() {

    [//this.timeout](//this.timeout)(0);

    await case1();});

  after(function() {console.log(' The use cases have been executed ')});

});

Mocha It also provides only,skip And other control case execution methods and hook functions before,after etc. .

Execute under the project path mocha command :

mocha test/caseList

You can get a concise test report

If you think this report is too concise , that mocha You can also generate visual reports First install the visual report plug-in

 npm install --save-dev mochawesome 

Re execution

mocha test/caseList --reporter mochawesome

You can be in case After execution , stay mochawesome-report Generate under directory HTML The test report of

Come here , You can use puppeteer+mocha Edit yourself uicase, And generate a good test report

Last

Puppeteer、Mocha It's more than that

The following is the supporting information , For doing 【 software test 】 For our friends, it should be the most comprehensive and complete war preparation warehouse , This warehouse also accompanied me through the most difficult journey , I hope it can help you ！

Last ： It can be in the official account ： Programmer Xiaohao  ！ Get a free copy of 216 Page software testing engineer interview guide document information . And the corresponding video learning tutorial is free to share ！, It includes basic knowledge 、Linux necessary 、Shell、 The principles of the Internet 、Mysql database 、 Special topic of bag capturing tools 、 Interface testing tool 、 Test advanced -Python Programming 、Web automated testing 、APP automated testing 、 Interface automation testing 、 Testing advanced continuous integration 、 Test architecture development test framework 、 Performance testing 、 Safety test, etc. .

If my blog helps you 、 If you like my blog content , please “ give the thumbs-up ” “ Comment on ” “ Collection ” One button, three links ！ Friends who like software testing , You can join our testing technology exchange group ：779450660 There are various software testing resources and technical discussions ）