A Preliminary Study on Web UI Automation Testing

Foreword

UI automation testing is to issue corresponding instructions to the client through written scripts to perform some action sets that simulate user operation behaviors, reducing the burden of repeating tedious and simple regression testing procedures for testers, and helping developers test the functions of ui component libraries

Principle

  1. Browser private protocol communication such as Chrome devtools protocol

Chrome DevTools Protocol allows tools to test, inspect, debug and configure Chromium, Chrome and other Blink-based browsers

{"id":1,"method":"Network.enable","params":{"maxTotalBufferSize":10000000,"maxResourceBufferSize":5000000}}
{"id":2,"method":"Page.enable"}

...

{"id":36,"method":"Overlay.highlightNode","params":{"highlightConfig":{"showInfo":true,"showRulers" :false,"showExtensionLines":false,"contentColor":{"r":111,"g":168,"b":220,"a":0.66} ,"paddingColor":{"r":147,"g":196,"b":125,"a":0.55},"borderColor":{" r":255,"g":229,"b":153,"a":0.66},"marginColor":{"r":246,"g\ ":178,"b":107,"a":0.66},"eventTargetColor":{"r":255,"g":196,"b": 196,"a":0.66},"shapeColor":{"r":96,"g":82,"b":177,"a":0.8} ,"shapeMarginColor":{"r":96,"g":82,"b":127,"a":0.6},"displayAsMaterial":true,\ "cssGridColor":{"r":75,"g":0,"b":130}},"nodeId":4}}
Copy Code

chromedevtools.github.io/devtools-pr…

www.wangshaoxing.com/blog/2017-0…

Start the chrome browser and expose the remote control port

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user- data-dir=$(mktemp -d -t 'chrome-remote_data_dir')
Copy Code

Puppeteer encapsulates the devtools protocol and provides a more convenient nodejs api to control the browser

2. Browser driver webdriver such as chromedriver

We can compare WebDriver driving a browser to a taxi driver driving a taxi. zhuanlan.zhihu.com/p/47831129

There are three roles when driving a taxi:

[Test script]Passenger: he/she tells the taxi driver where to go and how to get there

[Browser-driven] Taxi driver: He controls the taxi according to the requirements of the passengers

[Browser]Taxi: The taxi completes the real driving according to the driver’s control, and sends the passengers to the destination

Frameworks and tools

  1. Selenium (multilingual)

  2. webdriverio (nodejs)

  3. Cypress (nodejs)

  4. macaca (multilingual)

  5. …

Selenium

Selenium is a tool for testing web applications. The tests run directly in the browser, just like real users. Supported browsers include IE, Mozilla Firefox, Safari, Google Chrome, Opera, etc.

The main functions of this tool include: Test compatibility with browsers-test your application to see if it can work well on different browsers and operating systems. Test System Functionality – Create regression tests to verify software functionality and user requirements. Support automatic recording action and automatic generation

Selenium consists of several software tools, each with a specific function

Selenium 1 (Selenium RC or Remote Control) For a long time, Selenium RC was the main Selenium project until WebDriver and Selenium merged to produce the latest and greatest Selenium 2. Selenium 1 is still actively supported Developed (more maintained) and offers some features that Selenium 2 may not support anytime soon, including support for multiple languages (Java, Javascript, Ruby, PHP, Python, Perl and C#) and support for most browsers device support.

Selenium 2 (Selenium Webdriver) Selenium 2 represents the future direction of the project and is the latest addition to the Selenium toolset. This brand new automation tool offers a lot of great features, including a more cohesive and object-oriented API, and addresses legacy limitations. It supports WebDriver API and its underlying technology, and also provides great flexibility for porting test code through Selenium 1 technology under WebDriver API. Also, for backward compatibility, Selenium 2 still uses Selenium 1’s Selenium RC interface.

Selenium IDE (Integrated Development Environment) is a prototyping tool for creating test scripts. It is a Firefox add-on that provides suggested interfaces for creating automated tests. Selenium IDE has a recording function that can record user actions and export them to a reusable script in multiple languages for subsequent execution

Webdriverio

Selenium 1 because it uses a Javascript based automation engine, and browsers have a lot of security restrictions on Javascript, some things are difficult to achieve. To make matters worse, web applications are becoming more and more powerful, and they use various features provided by new browsers, which make these limitations painful. There is a need for a native method through the browser and operating system. A test tool for browser calls to solve the problem of Javascript environment sandbox. The goal of the WebDriver project is to solve the pain points of Selenium

Webdriverio is based on a node-based web automation testing framework, which encapsulates the Selenium WebDriver API and is very scalable. Compared with the native Selenium, the code of WebDriverIO is very simple and easy to understand. The api and method are similar to jquery, which is very convenient for front-end use. At the same time, WebDriverIO also supports mobile testing

Cypress

Relationship with Selenium (from official website translation):

“In fact, Cypress’s architecture is very different from Selenium’s in some key ways: Cypress runs in the context of the browser. With Cypress, it’s easier to inspect what’s running in the browser, but harder to talk to the outside world .In Selenium the opposite is true. Selenium runs outside of the browser where your application runs (although Cypress is adding more commands every day that give you access to the outside world – like cy.request(), cy.exec( ) and cy.task()). With Selenium, you can get 100% simulated events (using Selenium RC) or 100% local events (using Selenium WebDriver). With cypress, you have both. In most cases , we use simulated events. However, we use automation api on things like cookies, we extend outside the javascript sandbox, and interact with the underlying browser api. This gives us the flexibility to decide what to do in a particular situation Which type of event to use”

Macaca

Macaca is a test solution for client-side software, providing automation drivers, environment support, peripheral tools, and integration solutions, aiming to solve problems in testing, automation, and performance on the terminal

Example

Webdriverio

import path from "path";
import { login } from "../helpers/login";

describe('UI test', async () => {
    it('create-task: create a simple task', async () => {

        await login(browser);
        const timestamp = Date.now();
        await browser.url('https://xxx.xxx/project/P4702/list');

        const createBtn = await $('.header.k-button')
        await createBtn. click();

        await browser. pause(1000)

        const titleInput = await $('.k-home-new-task-modal-v-2.task-title__input_box')
        await titleInput.setValue(`[UI-T][${timestamp}] The title automatically created by ui`)

        const descTextArea = await $('.k-home-new-task-modal-v-2.ql-editor')
        await descTextArea.setValue('ui automatically created task description, ui automatically created task description, ui automatically created task description')

        const submitBtn = await $('.k-home-new-task-modal-v-2 .task-modal__custom-field-wrapper .task-modal__button-group .k-button')
        await submitBtn. click();

        // check if there is a required field
        const requiredMsg = await $('.k-home-new-task-modal-v-2 .k-error-msg');
        const isExistRequired = await requiredMsg.isExisting();
        if (isExistRequired) {
            await browser.saveScreenshot(path.resolve(__dirname, `../../screenshot/create-task-${timestamp}.png`));
            expect(0).toBe(1)
            return;
        }

    });

    it('task-detail: task details page - create subtask', async () => {
        await login(browser);
        await browser.url('https://xxx.xxx/task/T592167');

        await browser. pause(2000)

        const subTaskCreateBtn = await $('.k-button.create-task-btn')

        const isExisting = await subTaskCreateBtn.isExisting()

        if (isExisting) {
            await subTaskCreateBtn. scrollIntoView();
            await subTaskCreateBtn. click();
            await browser. pause(2000)
            await browser.keys(['Hahaha, I am a task created by a robot', 'Enter']);
        } else {
            expect(0).toBe(1)
        }

    })

    it("task-detail: task detail page - sidebar scroll reset", async () => {
        await login(browser);
        await browser.url('https://xxx.xxx/task/T592167');
        await browser. pause(1000);
        const lastSiderBarBtn = await $('.mini-sidebar a:last-child');
        await lastSiderBarBtn. click();
        await browser. pause(1000);
        const back2TopBtn = await $('.menu-icon-back2top');
        await back2TopBtn.click();
        await browser. pause(300);
        const scrollContainerBox = await $('#scrollContainer')
        const scrollTop = await scrollContainerBox.getProperty('scrollTop');
        expect(scrollTop).toBe(0)
    })
});
Copy Code

Cypress

/// <reference types="cypress" />

context('Aliasing', () => {
  beforeEach(() => {
    cy.visit('https://xxx.xxx/');
    cy.setCookie("k-token","b0b4574ab80e059a61fdc18fd9ca7179")
    cy.setCookie("accessproxy_session","9332c36a-85d5-4d9e-be22-2a21d567711e")
    cy.visit('https://xxx.xxx');
  })

  it('Test it', () => {
    // https://on.cypress.io/as

    // Alias a DOM element for use later
    // We don't have to traverse to the element
    // later in our code, we reference it with @

    cy.get('.header.k-button-group.k-button').as('firstBtn')

    // when we reference the alias, we place an
    // @ in front of its name
    cy.get('@firstBtn').click()

    cy.get('.k-home-new-task-modal-v-2 .task-title__input_box').type(`[UI-T] The title automatically created by ui`)
    cy.get('.k-home-new-task-modal-v-2.task-modal__custom-field-wrapper.task-modal__button-group.k-button').click();

    // cy. get('@firstBtn')
    // .should('have.class', 'btn-success')
    // .and('contain', 'Changed')
  })

})
Copy Code

Summary

  1. The originator of Selenium automated testing, supports multiple languages
  2. webdriverio is a testing framework based on node development on Selenium, only supports nodejs language
  3. Cypress is different from Selenium and webdriverio. Cypress runs directly in the browser context. The test is relatively real, highly integrated, and easy to use.
  4. macaca is a standardized multi-terminal testing solution developed and open sourced by Ali in China.

Finally: The following complete software testing video learning tutorial has been sorted out and uploaded. If you need it, you can get it for free 【Guaranteed 100% Free】

These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can help you too!

syntaxbug.com © 2021 All Rights Reserved.