An overview of ourselves

Released by Microsoft in early 2020, the ourselves is a next-generation automated testing tool based on JEST’s E2E testing framework, On the basis of JEST, it has set up an API that can automatically perform Chromium, Firefox, WebKit and other mainstream browser automation operations, so as to achieve convenient automated testing.

Second, the offender’s environment

Ourselves supports automated testing with Chromium, Firefox, and WebKit browsers.

The browser kernel mapping is as follows:

As you can see, it supports most browsers on the market.

You can run the site on different browsers by executing the following instructions.

NPX ourselves [browser] [website]

Example command: NPX offended cr wikipedia.org

This directive refers to running wikipedia.org in a chromium-based browser.

Environmental requirements:

The use of ourselves

Using the offender on a project involves a three-step process of installing the offender, recording the instructions, and then integrating the offender into the project’s husky or pipeline for automated testing.

3.1 Installation of the ourselves

Execute the following instructions in the root directory of your project to install.

NPM installation is as follows:

$ npm i -D playwright
Copy the code

Install YARN as follows:

$ yarn add -D playwright
Copy the code

Then perform

$ npx playwright install
Copy the code

3.2 Ourselves’ s browser command recording

Record by executing the following command in the root directory of your project.

Ourselves neither offended nor offended.

Example command: NPX ourselves codeGen wikipedia.org

Example:

Enter NPX CodeGen wikipedia.org on the terminal and we can get the following:

As shown in the example, after entering the command, we can get all the instructions about the user action from the upper right panel, and the target in the upper right corner can convert the command.

// This section is the added code
const { chromium } = require('playwright');

(async() = > {const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext();

  // Open new page
  const page = await context.newPage();

  // Go to https://www.wikipedia.org/
  await page.goto('https://www.wikipedia.org/');

  // Click input[name="search"]
  await page.click('input[name="search"]');

  // Fill input[name="search"]
  await page.fill('input[name="search"]'.'test');

  // Click input[name="search"]
  await page.click('input[name="search"]');

  // Press ArrowDown
  await page.press('input[name="search"]'.'ArrowDown');

  // Press Enter
  await page.press('input[name="search"]'.'Enter');
  // assert.equal(page.url(), 'https://zh.wikipedia.org/wiki/TESTV');

  // Click text=TESTV is an online "we media" channel launched by Chongqing Feige Culture Communication Co., LTD. Its programs include "Is it Worth To Buy", "BB Time", "Is it Worth to Eat", "Is it Worth to Buy", etc
  await page.click('Text =TESTV' is an online we-media channel launched by Chongqing Feig Culture Communication Co., LTD. Its programs include "Is it Worth Buying", "BB Time", "Is it Worth Eating" and "Is it Worth Eating".);

  // Click p >> text=
  await page.click('p >> < span style = "max-width: 100%;);
  // assert.equal(page.url(), 'https://zh.wikipedia.org/wiki/%E7%88%B1%E5%A5%87%E8%89%BA');

  // ---------------------
  await context.close();
  awaitbrowser.close(); }) ();Copy the code

We can click javascript to get a file that can be executed, copy the code into a new index.js file, execute Node index.js and see the automatic execution.

3.3 Ourselves automated testing

Having said all that, how does Offended fit into our project?

There are currently two applications

1. Local commits are intercepted by hooks and the test files are run one by one.
2. Integrate CI for testing after uploading code.

3.3.1 Implement tests locally

Copy the above playtest-test into the js file.

If the NPM run test or NPX run test is executed in the root directory of the project, the test file [filename].spec.js or [filename].test.js will be automatically executed for the E2E test and the test report will be automatically output.

3.3.2 Implement testing in CI

Write the gitlab-ci.yml file

build:
  stage: build
  image: mcr.microsoft.com/playwright:focal
  cache:
    paths: 
      - node_modules
  script:
    - /etc/init.d/dbus start
    - node -v & npm -v
    - npm install --force
    - npx playwright install chrome
    - npm run test
Copy the code

Q & A

4.1 What should I do if the Page. WaitForNavigation always fails when I jump to the page?

A Lord

await Promise.all([
   page.waitForNavigation(/*{ url: 'https://example' }*/),
   page.click('button:has-text("Log In")')
 ]);
Copy the code

Replaced with a

await page.waitForTimeout(2000);
await page.click('button:has-text("Log In")')
await page.waitForTimeout(2000);
Copy the code

After some testing, I found that it works just by deleting page.WaitforNavigation.