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

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