The original link

Project background

Recently, I helped the platform group to conduct UI automatic test. After several investigations, I selected Ali’s MacACA as the technology stack, and carried out the development of UI automatic test based on the macACa-Nodejs-Boilerplate template with reference to sample-NodeJS

preparation

Because UI automatic testing needs to use CSS selector, in order to find the convenience, to do automatic testing in the project to set the anchor point, I use name=”” attribute as the anchor point of automatic testing

Research process and problems

View report Results

Goal: After macACA compiles successfully and outputs the report, open the corresponding browser to view it

  1. Install the open library
yarn add open
Copy the code
  1. Write the open.js utility class
const open = require('open');
const path = require('path');
 
// Opens the image in the default image viewer
(async() = > {// Specify app arguments
    await open(path.join(__dirname, '.. '.'reports'.'index.html'), {app: 'chrome'}); }) ();Copy the code
  1. Called in package.json file
"scripts": {
  "doctor": "macaca doctor"."start": "npm run test:chrome & yarn test:report".// Note that the & must be used or not called after the test fails
  "test:chrome": "cross-env browser=chrome npm run test:desktop-browser"."test:desktop-browser": "macaca run --reporter macaca-reporter --verbose -d ./test/index.js"."test:report": "node ./utils/open.js"
}
Copy the code

Customize screenshots to screenshots folder

Write custom methods in wx-extend.js

wd.addPromiseChainMethod('customSaveScreenshot'.function(context) {
  const filepath = path.join(__dirname, '.. '.'screenshots'.`${_.uuid()}.png`);
  const reportspath = path.join(__dirname, '.. '.'reports');
  _.mkdir(path.dirname(filepath));
  return this
    .saveScreenshot(filepath)
    .then(() = > {
      appendToContext(context, `${path.relative(reportspath, filepath)}`);
    });
});
Copy the code

Steps that invoke the same logic

It’s really looking at the use of Promise

const Promise = require('bluebird');

const array = [1.2.3.4];
// Call promise.reduce to implement chained sequential calls
// The reduce method is traversed from the second data, so null must be added before array
return driver
  .then(() = > Promise.reduce([null. array],(total, graph, index) = > {
      returnDriver.elementbycss (selector).click().sleep(1000)}})));Copy the code

Simulate a file upload operation

Antd framework was used in the project, and several approaches were tried here

domEvent

The domEvent method is called to simulate the change operation 

driver
.elementByCss('#input-element')
.domEvent('change', {
  data: {
    files: [{file: 'foo.jpg'}}}]);Copy the code

It is not successful in ANTD because it probably needs to call the upload component method to work

sendKeys

The sendKeys method also failed to assign directly to the Input control for the same reason

Use autoit software to edit script and simulate upload operation

  1. First, download the Autoit software from the official website. After installation, open the upload window and open the Autoit software. Find out the file name and the CORRESPONDING ID of the two controls, as shown below

  2. Open the editor and add the following code

    ControlFocus("[Class:#32770]".""."Edit1") // Initiate a focus event on the file name
WinWait("[Class:#32770]"."".10) // Wait for 10 ms
ControlSetText("[Class:#32770]".""."Edit1",$CmdLine[1]) // Assign a value to the file name, where $CmdLine[1] represents the first argument to the call command
Sleep(2000)
ControlClick("[Class:#32770]".""."Button1") // Click the open button
Copy the code

  3. Compile the above code to generate upload.exe

  4. Write custom methods in wx-extend.js

    require('shelljs/global');
wd.addPromiseChainMethod('uploadFile'.function(filePath) {
  constUploadPath = path.resolve(__dirname, upload.exe); uploadPath = path.resolve(__dirname, upload.exe);constVoicePath = path.resolve(__dirname, directory where files are uploaded); exec(`${uploadPath} ${path.join(voicePath, filePath)}`);
});
Copy the code

  5. Happy call method, upload successfully

    Driver. UploadFileCopy the code