My recent experience with Cypress and TestCafe, both of which are based on Node.js, and both of which no longer use Selenium+WebDriver, is very lightweight right out of the box. The fact that WebDriver is no longer used has greatly intrigued me. So today, I will study briefly and use this article as my study notes.

This study note is based on Windows10. Please refer to the official website for Mac and Linux. Note: Both Cypress and TestCafe rely on Node.js, so make sure you have node.js installed on your computer before you start studying. This article is just a brief Demo study note.

Install Node.js and configure the NPM environment variables

1. Node.js download address: nodejs.org/en/

2. Installation path

3. Configure NPM environment variables

Install the Cypress

Method 1: Use commands to install the software. (If CMD installation is slow, you are advised to download the installation package.)

npm install cypress
Copy the code

Method 2: Or download the installation package www.cypress.io/ from the official website. The decompressed file is as follows, and click the cypress. exe installation file to start

Start and run Cypress

Method 1: Start the vm using the CMD command line interface

(NPM later than V5.2 comes with NPX, or you can install NPX separately.)

npx cypress open
Copy the code

Method 2:

Method 3:
npm run cypress:open
E:\WorkSpace\Ui_test\node_modules\cypress 

{
  "scripts": {
    "cypress:open": "cypress open"}}Copy the code

npm run cypress:open

Method four: of course, there are several ways to start, please refer to the official website; The most convenient boot method has been selected above.

Cypress starts the running interface

The Cypress screen starts as follows: Select the project address, and then proceed to select and execute the test scripts within the project.

Cypress test scripts and execution

Let’s start with the file structure:

|-- fixtures
|-- integration
|   `-- example_spec.js
|-- plugins
|   `-- index.js
`-- support
    |-- commands.js
    `-- index.js
Copy the code

The fixtures folder holds the custom JSON file; Integration folder to write tests; Plugins and support are optional folders that are used when you need to customize directives.

Add your first test case

1. If cypress is installed by CMD NPM, use case scripts are in \node_modules\cypress\cypress\integration\examples. 2. If you are downloading decompressed Cypress, use case scripts are in \cypress\integration\examples

New sample_spec. Js:

describe('My First Test'.function () {
    it('Does not do much! '.function () {
        cy.visit("https://www.baidu.com")
        cy.get("#kw").type("cypress test")
        cy.wait(60)
        cy.get("#su").click()
        cy.contains('cypress website').click()
    })
})
Copy the code

Then run Cypress to see the following image, and click on the JS file directly to run the test case, which will launch Chrome to run the script.

Install TestCafe

A Node.js-based WebUI automated end-to-end testing framework that writes tests in JS or TypeScript.

npm install -g testcafe Global install mode
Copy the code

Refer to the website 

testcafe chrome tests/
Copy the code

TestCafe creates a simple test example

TestCafe allows you to write tests using JavaScript and TypeScript.

To create tests, create a new.js or.ts file. This file must have a special structure – tests must be organized into fixtures. Take sample.js as an example: 1. First, import the testcafe module

import { Selector } from 'testcafe';
Copy the code

2. Then declare a fixture using the fixture function.

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;
Copy the code

3. Next, create a test function where you can enter the test code and save it as sample.js.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // Test code
});
Copy the code

TestCafe runs the test script

In your project folder, switch CMD to your specified target browser and file path to run the test.

testcafe chrome sample.js
Copy the code

TestCafe will automatically open the browser of your choice and start executing the test in it.

Viewing test results

When the test runs, TestCafe collects information about the test run and outputs a report in the shell command window.

Refer to the website

TestCafe writes the test code

Every test should be able to interact with page content. TestCafe provides Click, hover, TypeText, setFilesToUpload, and so on for user actions to perform. They could be called chains, operating chains.

The fixture below contains a simple test that types a developer name in a text editor and then clicks the Submit button.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name'.'Soft test student')
        .click('#submit-button');
});
Copy the code

All operations are implemented using the asynchronous functionality of the object controller T. This object is used to access the test run API. To wait for operations to complete, use the await keyword when calling these operations or chains of operations.

TestCafe allows testers to observe the state of a page. To do this, it provides special types of functions that execute code on the client side :Selector to access DOM elements directly, and ClientFunction to fetch arbitrary data from the client. You can call these functions as regular asynchronous functions, that is, you can get their results and pass data to them with arguments. The Selector API provides methods and properties to select elements on a page and get their state.

For example, clicking the Submit button on the sample Web page opens a “Thank you” page; To access the DOM element on the open page, you have to use the Selector function. The following example shows how to access the article title element and get its actual text.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name'.'Soft test student')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1'); // Get the text of the article titlelet headerText = await articleHeader.innerText;
});
Copy the code

See Selecting page elements for more information

In general, functional tests should also examine the results of actions performed. For example, the article title on the thank you page should appear as the name entered by the user. To check that the page Title is correct, you must add assertions to the test: The following test demonstrates how to use the built-in assertions.

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name'.'Soft test student')
        .click('#submit-button') // Use assertions to check whether the actual title text is equal to the expected title text. Expect (Selector()'#article-header').innerText).eql('Thank you, soft beta student! ');
});
Copy the code

Summary: After working with Cypress and TestCafe, I was surprised to learn that both tools are incredibly lightweight compared to Selenium. From installation to execution of the first script, as you can see from the study notes above, getting started in 10 minutes is no flub.

Looking back to the time when Selenium+WebDriver learning road, it can be said that it is very difficult, also very complex, a large reason may be because at that time is small white; After seeing Cypress and TestCafe, I couldn’t put it down and decided to use the current project to expand.