Cypress

Automated Web Testing and Monitoring with Cypress

1. Install Cypress using yarn or npm:

• To install Cypress via yarn, first, navigate to the project directory and execute the following command:

yarn add cypress --dev

• To install Cypress via npm, first, navigate to the project directory and execute the following command to create a package.json file:

npm init        

Then execute the below command to install Cypress using npm:

npm install cypress --save-dev

2. Open the Cypress folder in a code editor of your choice (e.g., VS Code) and launch Cypress using npx by running the following command in your terminal:

npx cypress open

To run Cypress in the Terminal, use the 'npx cypress run' command. It will make use of its default browser (Electron) to run your tests.

3. The Next step is to choose a preferred browser (e.g., Chrome) from the given list.

Under the E2E specs, you can find the test cases you have created so far, and by clicking on them, you can run them.

4. Record the Cypress Script.

Unlike Playwright, Cypress does not have an inbuilt Recorder but you can make use of Chrome DevTools and Cypress Chrome Recorder Extension to Record browser actions to generate a Cypress script.

To add Cypress Chrome Recorder Extension:

For recording browser actions and exporting them as a Cypress Script, we need to install the Cypress Chrome Recorder Extension.

Go to this URL to install Cypress Chrome Recorder.

5. Enable Recording:

• Click the More Options icon (upper right corner) in Chrome and select Developer Tools from the More Tools option.

• In Developer Tools, click the More Options icon and select Recorder from the More Tools option.

On enabling the Recorder, you can start recording browser actions performed on the browser window.

6. Record and Export Script:

For this example, we will be performing the following actions and exporting the recordings to the Cypress Script:

1. Start from the Google Search page.

2. Search for "Perfagents".

3. Go to the Perfagents Website.

4. Perform a few actions.

To Record, perform the following actions:

• In the Recorder, click 'Create a new recording'.

• Click on 'Start recording'.

• Click 'End recording' to stop recording.

• Click the 'Export' icon to export as a Cypress Test.

• Save the script on your local machine.

7. Integrate with Perfagents:

Add the following line of code as the first line of your Exported Script:

Cypress.on('uncaught:exception', (err, runnable) => { return false; });

To take screenshots, add the below line of code. Make sure not to add a path or name to the screenshot.

cy.screenshot();

Screen recording is by default turned on for all tests in Cypress

To include multiple tests in a single file, create each test as different "it" functions

describe("test_name", function () {
    it("Test_1", function () {
        // Add your test script here
    });
    
    it("Test_1", function () {
        // Add your test script here
    });
});
    

Save the file using the ".cy.js" extension. Example: "sample.cy.js"

On uploading the validated tests by browsing the files, and by clicking on 'Next', it goes to the next step 'Device Profile' where the user has to choose the type of device. Next is the Frequency page.