Web automated testing practices

background

Project development, is very important to self-test, finish to a function, manual operation to simulate a user to again every time, especially for some function or component with higher repeatability, so the efficiency is low and time-consuming, if to write automation test, our project can greatly improve the efficiency of the development of our self-test, reduce duplication of work, save manpower and time.

Conclusion: Benefits of automation = number of iterations x cost of full manual execution – cost of first automation – number of maintenance x cost of maintenance

UI automatic test selection

In terms of the current project, the maintenance cost of unit test is relatively high, and the service interface test server does it. Most of our project is GUI, which is more suitable for UI automatic test. The following comparison items are used to select the automatic test framework suitable for project development:

Making attention
Technical support
Regular maintenance
Is the community active
Easy to learn

Compare the item	Puppeteer	Nightwatch	Nightmare	PhantomJS	CaseperJS	TestCafe	Cypress
Community, attention	Google development, good prospects, active community contributions	Vue-cli recommended, with maintenance	No maintenance, embrace Puppeteer	No maintenance, embrace Puppeteer	The new version will migrate from PhantomJS to Puppeteer	Open source time is short and the community and ecology are not mature enough	Vue-cli recommended, with maintenance
integrity	Other tests require third-party libraries, such as assertions, orchestration, and result reporting	Complete end-to-end testing framework, you can also write Node.js unit and integration tests	Similar PhantomJS	Complete end-to-end testing framework, special links can not snapshot	In some packages on the PhantomJS ease of use API, special links cannot be snapshored	Screen recording and DOM snapshot are not supported	Complete testing framework
Ease of use	Easy to use, high performance, can be executed without interface	NPM installation trouble, vuE-CLI has been configured, easy to use	Very simple test syntax	It’s a bit of a hassle to install	Better than the Phantom	Slow execution but concise reporting	Use cases take a long time to execute, vue-CLI installation is slow, and the code is concise
Star	52k	9.5 k.	17.5 k.	26.9 k.	7.3 k.	7.2 k.	13.5 k.

Puppeteer, Nightwatch and Cypress are the three most popular testing frameworks, which can be used according to the project.

Puppeteer

(1)The official documentation
(2) Installation:

npm i puppeteer
Copy the code

(3) Write test cases:

// app.js
// Scenario -> The simulated user opens the help description page of the school information communication in different languages, and clicks whether it is helpful for the problem. Finally, the screenshot of the relevant language is generated

const puppeteer = require('puppeteer');
const chalk = require('chalk');

// Execute code asynchronously
(async() = > {// Create a browser instance object. Headless is true to indicate that the browser is not open
    const browser = await puppeteer.launch({
        headless: true
    });

    try {
        // Create a page object by instance
        const page = await browser.newPage();

        // Listen for logs and print them to the console
        page.on('console'.msg= > {
            for (let i = 0; i < msg.args().length; ++i)
                console.log(`${i}: ${msg.args()[i]}`);
        });

        // set the viewport to iphone6 size
        await page.setViewport({
            height: 667.width: 375
        });
        let projectUrl = 'Project address? language=`;
        let urlList = [`${projectUrl}zh-CN`.`${projectUrl}en`.`${projectUrl}th`.`${projectUrl}in-ID`.`${projectUrl}zh-HK`]

        for (let i = 0; i < urlList.length; i++) {
        console.log(urlList[i])
        // Open the specified page
        await page.goto(urlList[i]);

        // Delay operation, open the page load time
        await page.waitFor(500);

        // Print the page title
        console.log(chalk.green(await page.title()));

        // Click feedback
        await page.click('#like');

        // Take a screenshot and save
        await page.screenshot({
            path: 'pic' + i + '.png'
        });
        }

        // Close the browser
        await browser.close();

    } catch (e) {
        console.log(chalk.red('error'));
    }
})();
Copy the code

(4) Test command:

node app.js

(5) Effect drawing:

Nightwatch

(1)The official documentation
(2) Installation: Through vuE-CLI3 scaffolding installation, select E2E Test Frame > check Nightwatch. Or install Nightwatch through NPM, recommend using VUE-CLI installation, can save a lot of configuration.

(3) Write test cases:

// tests/e2e/specs/test.js
// Scene -> Simulate the user input the answer, judge whether the input meets the expectation and take screenshots

module.exports = {
  "default e2e tests": browser= > {
    browser
      .url(process.env.VUE_DEV_SERVER_URL) // Open the current function page
      .waitForElementVisible("#app".5000) // Specifies whether the element is visible at the specified time
      .assert.elementPresent(".hello") // Check whether the given element exists in the DOM
      .assert.containsText("h1"."Please enter your answer") // Checks whether the given element contains the specified text
      .setValue(".search"."2".function() {
        browser.click(".submit".function() {
          browser.saveScreenshot("reports/result.png"); // Simulate the user to enter 2 in the text box, click Submit and take a screenshot
        });
      })
      .end(); // Close the page}};Copy the code

(4) Test command:

npm run test:e2e

(5) Effect drawing:

Cypress

(1)The official documentation
(2) Installation: Through vuE-CLI3 scaffolding installation, select E2E Test Framework > check Cypress. Or install Cypress through NPM. Vue-cli is recommended to save a lot of configuration.
(3) Write test cases:

// tests/e2e/specs/test.js
// Scene -> Simulate the user input the answer, judge whether the input meets the expectation and take screenshots

describe("My First Test".() = > {
  it("Visits the app root url".() = > {
    cy.visit("/"); // Open the current function page
    cy.contains("h1"."Please enter your answer"); // Checks whether the given element contains the specified text
    cy.get(".search"); // Get the search input box
      .type("2"); // Simulate user input 2
    cy.get(".submit").click(); // Click Submit
    cy.screenshot('example'); / / screenshots
  });
});
Copy the code

(4) Test command:

npm run test:e2e

(5) Effect drawing:

conclusion

puppeteer

To avoid cumbersome installation and slow execution, use Puppeteer directly
Puppeteer is available for those who prefer no-interface testing
Traditional page development can be Puppeteer

nightwatch

Vue-cli new projects can use Nightwatch
You can use Nightwatch if you want to do assertions, mock requests, report results, and so on, but you don’t want to configure other dependencies

Cypress

Vue-cli new projects can use Cypress
Like interface, and can see the test status menu, operation playback can use Cypress
You can use Cypress if you want to do assertions, mock requests, report results, and so on, but you don’t want to configure other dependencies
Like concise syntax

background

UI automatic test selection

Puppeteer

Nightwatch

Cypress

conclusion

puppeteer

nightwatch

Cypress

Related Posts

LeetCode brush, function exclusive time (636)

FormData object introduction and use method

Common apis for console objects