Testcafe provides automatic waiting mechanism and live operation mode

And what I mentioned earlier Cypress and Puppeteer identical ,TestCafe The framework also has built-in automatic waiting mechanism . in addition ,TestCafe Also provide live Operation mode and concurrent operation mechanism , adopt live Mode can observe the running process in real time , Convenient debugging . The test execution time can be shortened by running concurrently . This course will use TestCafe Write a simple one UI Layer automation script , And use live Run the script in mode . In order to achieve the objectives of this course , Split up 4 individual task.

• Write a simple one UI Layer automation script
• Use live Run the test script
• Use Page Object Design patterns write automated scripts
• Run multiple test cases concurrently

Next we will start with the first task

Write a simple one UI Layer automation script

• 1. Initialize project

perform "npm init" command , Input is required during execution package name, Name customization . After executing this command ,cd Go to the project directory , That is, under the package name directory just entered , Because there is already package.json file , Followed by execution “npm install testcafe --save” command , The function of this command is to download testcafe package . Because of the addition of --save Parameters , So the testcafe Package information is automatically added to package.json In file .

• 2. Create the first test script

Create a “login_spec.js” The file of , The contents are shown below , You can see that there are no statements waiting to be processed in the test script , because TestCafe Built in automatic waiting mechanism , There is no need for users to wait for processing manually .

fixture('login web application')  
// Describe the tested scene , One fixture Can contain multiple test 

test('should login successfully', async (t) => {     
    //test（.....） Write the case Express information , utilize testcafe Write test scripts using async-await The way , All operations are t start , Therefore adopt async(t) => {....} Into the t object 

    await t.navigateTo("https://angular.realworld.io/")    
    // Open the page 

    await t.click('app-layout-header li a[href="/login"]')  
    // Click the login link 

    await t.typeText('app-auth-page form input[formcontrolname="email"]', '[email protected]')  
    // enter one user name 

    await t.typeText('app-auth-page form input[formcontrolname="password"]', '12345678')  
    // Input password 

    await t.click('app-auth-page button[type="submit"]')
    // Click login button, Complete the login operation 
})

package.json Configure the command to run the script in the file , As shown in the figure below , You can see that the configured script path is relative to the code root directory

{
  "name": "testcafe-e2e",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "version": "testcafe -v",
    "browsers": "testcafe -b",
    "test:chrome": "testcafe chrome ./e2e/scenario/first/login_spec.js",  
    // Set the local address of the test pin and specify the browser to run 

    "test:firefox": "testcafe firefox ./e2e/scenario/first/login_spec.js",
    "test:safari": "testcafe safari ./e2e/scenario/first/login_spec.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "testcafe": "^0.23.2"
  }
}

IDE Execute in the command box of the tool or the command line tool “npm run test:chrome” Run the test script . The results are shown in the following figure , You can see that it will open TestCafe, Then start chrome browser , Open the application under test to complete the login operation . Close the browser and TestCafe.

modify package file , Change to headless mode .

"test:chrome": "testcafe chrome:headless ./e2e/scenario/first/login_spec.js",

  The operation process is as follows , You can see that the whole process is no longer displayed. Open the browser , Open the application interface , After execution, the execution result will be displayed directly . The test script runs more efficiently in headless mode , Therefore, it is recommended to use headful How to run , When the script debugging is completed and put into the continuous integration platform to run, use headless mode , Reduce the running time of use cases .

Switch to Firefox perhaps Safari function , The execution result is shown in the figure below , You can see that it runs successfully , explain TestCafe Support multiple browsers .

• 3. View test report

In order to generate html Formatted test report , Need to install “testcafe-reporter-html”, And in package Configure test report name and address information . Use “npm install testcafe-reporter-html” Install required packages ,package.json Add test report configuration content in the file , As shown in the figure below

"test:chrome": "testcafe chrome:headless ./e2e/scenario/first/login_spec.js --reporter html:report/login_report.html", 

//  After the test execution is complete , The name will be automatically created in the code root directory reporter The catalog of , And generate in this directory the name login_report Test files for 

  View the test report as shown in the following figure , You can see TestCafe Built in test framework , Therefore, there is no need to install additional test framework （ for example mocha etc. ） You can run and generate beautiful test reports .

The above demonstrates the use of TestCafe How to write and run automated scripts in multiple browsers when using the framework , Let's see TestCafe Provided live Operation mode .

Use live Run the test script

After running a test case ,testcafe Will be closed . here , If you modify the script, you need to run it again , Then you need to restart testcafe, Turn on testcafe It will take some time .Live The pattern solves this problem well , Turn on live After the model ,testcafe It can automatically monitor whether the test script changes , If the test script changes , It can automatically re execute the test script , This allows faster verification of test results . To use live There are two modes .

Mode one ： Execute the order first “npm install testcafe-live” install testcafe-live, And then in package.json Configure the run script command in the file "test:loginLive": "testcafe-live chrome e2e/scenario/basic/login_spec.js" that will do .

Mode two ：TestCafe Has integrated testcafe-live Code for , Therefore, it is not installed testcafe-live It can also be used when packaging live Run the test script in mode ,package.json Add -L Parameters can be .

As shown in the figure below , adopt live Run the test script in mode , After the case runs testcafe Will not close , At this point, you can enter the shortcut key to close or rerun the test script . Here's a little bit of attention ,live Mode is recommended for debugging , If the test script is running on the continuous integration platform , Do not use live Pattern .

TestCafe live Modes support 4 Shortcut key commands .

• ctrl+s - Stop running
• ctrl+r - Rerun
• ctrl+w - Turn off or turn on monitoring （ Monitor whether the test script is modified ）
• ctrl+c - Close the browser and terminate testcafe process

It says testcafe Of live Operation mode , Next , Let's look at using testcafe How to use when page object Design patterns .

Use Page Object Design patterns write automated scripts

Testcafe The framework encapsulates all operations in objects t above , So if you use page object Design patterns write automated scripts , Just in page Object t Object can . Take the login script above as an example , establish loginPage.js file , And write the script of the login step into the file .

async function login(t) {  
  // Parameters of the incoming t object 
    await t.navigateTo("https://angular.realworld.io/");
    await t.click('app-layout-header li a[href="/login"]');
    await t.typeText('app-auth-page form input[formcontrolname="email"]', '[email protected]');
    await t.typeText('app-auth-page form input[formcontrolname="password"]', '12345678');
    await t.click('app-auth-page button[type="submit"]');
}

module.exports={
    login:login
};

 case Layer introduction loginPage.js, Call encapsulated login The method can .

test("should login with page object successfully",async(t) => {
   await  loginPage.login(t);
   //case Script call of layer loginPage Medium login The method can .
});

  Here's how to use page object Design patterns , Last , Let's see how to run test cases concurrently .cypress and puppeteer It is not supported to open multiple browsers at the same time and execute test scripts concurrently , but testcafe Support , And the use is very simple .

Run multiple test cases concurrently

TestCafe The configuration information of the framework can be found in “.testcaferc.json” Set in file , This configuration file is placed in the code root directory . If you want to execute multiple test cases concurrently , Just add “concurrency” To configure , And set the amount of concurrent data . For example, in .testcaferc.json The concurrency number set in the file is 3, When running the test case, three browsers will be opened .

 "concurrency": 3,

 package.json Configuration in file testSuite, this testSuite Contains two xxx_spec.js Test script file , There are three test cases in total in the two documents . perform “npm test" You can open three browsers to run the test script .

"test": "testcafe chrome e2e/scenario/basic/*_spec.js"

The execution result is shown in the figure below , You can see that three chrome, Each browser is executing different test cases .

  thus , This blog is over , This blog introduces the use of TestCafe The framework is simple UI Layer automation scripts and Live Or not Live Operation mode , Through the study of this chapter TestCafe I have a preliminary impression , The next lesson will introduce the use of TestCafe How to position the frame 、 Operate page elements and verify execution results .