Cypress is the framework used to test the E2E front end of SAP Spartacus.

Cypress is not a web automation tool in the broadest sense and is not suitable for writing scripts to test sites that are already in production and out of tester control.

Cypress is not a general purpose web automation tool. It is poorly suited for scripting live, production websites not under your control.

Docs. Cypress. IO/guides/gett…

After a test function is finished running, Cypress goes to work executing the commands that were enqueued using the cy.* command chains.

After all of Cypress’s test functions have finished running, Cypress does not begin to execute the instructions previously placed in the task queue through the cy.* command.

This simple Cypress test program, the source code is as follows:

/// <reference types="Cypress" />

describe('My First Test'.() = > {
  it('finds the content "type"'.() = > {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click();

    cy.url().should('include'.'/commands/actions');

    cy.get('.action-email')
      .type('[email protected]')
      .should('have.value'.'[email protected]'); })})Copy the code

The test results are as follows:

Line by line statement analysis

1. The describe statement

Describe is a Mocha.SuiteFunction function that takes the string title and arrow function as input parameters. Return the mocha.suite instance. The describe function is only available when called by the Mocha CLI.

2. it

Define a Test Specification (also known as a test case). The callback function is the execution code of the test main program.

3. cy.visit

Accesses the specified URL.

Help documentation for the command:

Docs. Cypress. IO/API/command…

When the page for the VISIT url ends loading, yield a Windows object:

cy.visit('/') // yields the window object
  .its('navigator.language') // yields window.navigator.language
  .should('equal'.'en-US') // asserts the expected value
Copy the code

Its method: gets the value of the argument specified by the calling object.

Example:

cy.wrap({ width: '50' }).its('width') // Get the 'width' property
cy.window().its('sessionStorage') // Get the 'sessionStorage' property
Copy the code

Refer to its help documentation:

Docs. Cypress. IO/API/command…

Execution details for cy.visit() :

Cypress automatically detects things like a page transition event and will automatically halt running commands until the next page has finished loading.

Cypress automatically detects events such as Page Transition and does not proceed with the instruction if the cy.visit page is not loaded.

Had the next page not finished its loading phase, Cypress would have ended the test and presented an error.

If the cy.visit page eventually fails to load, Cypress stops the test and throws an error message.

Under the hood – this means you don’t have to worry about commands accidentally running against a stale page, nor do you have to worry about running commands against a partially loaded page.

This allows us to write a Cypress program without having to worry about instructions running on a page that is loading.

We mentioned previously that Cypress waited 4 seconds before timing out finding a DOM element – but in this case, when Cypress detects a page transition event it automatically increases the timeout to 60 seconds for the single PAGE LOAD event.

The timeout time for the Cypress directive to find A DOM element is 4 seconds, which is automatically changed to 60 seconds when Cypress waits for the Cy. visit loading page to complete.

4. Cy. The contains (‘ type ‘)

Get the DOM element containing the text.

Find the element in the DOM tree that contains the type text.

As shown below:

Open the Chrome Developer Tool, and you can view the result after executing this command:

In the following example, the HTML to be tested looks like this:

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
</ul>
Copy the code

The following statement:

Cy. The contains () ‘apples’

The generated DOM object is:

<li>apples</li>
Copy the code

The contains method queries on descendants of a node:

<div id="main">
  <form>
    <div>
      <label>name</label>
      <input name="name" />
    </div>
    <div>
      <label>age</label>
      <input name="age" />
    </div>
    <input type="submit" value="submit the form!" />
  </form>
</div>
Copy the code

The code to find the input element:

cy.get('form').contains('submit the form! ').click()
Copy the code

5. click

This command simulates a user interacting with your application. Under the hood, Cypress fires the events a browser would fire thus causing your application’s event bindings to fire.

The click command simulates user click behavior in an application. Underneath, Cypress triggers the application’s event handlers in the same way that an event is thrown when the user actually clicks on the browser.

Prior to issuing any of the commands, we check the current state of the DOM and take some actions to ensure the DOM element is “ready” to receive the action.

Before Cypress executes the click command, the framework checks the DOM state to ensure that the DOM element actually receives click events.

Before executing the click command, there are all these checks and lead events that need to be executed:

  • Scroll the element into view.
  • Ensure the element is not hidden.
  • Ensure the element is not disabled.
  • Ensure the element is not detached.
  • Ensure the element is not readonly.
  • Ensure the element is not animating.
  • Ensure the element is not covered.
  • Scroll the page if still covered by an element with fixed position.
  • Fire the event at the desired coordinates.

Open Chrome Developer Tools and you can see the screen coordinates when the click command is executed and the mouse events that occur:

6. cy.url

Gets the URL of the currently active page.

7. Cy. Url (). Should (‘ include ‘, ‘/ commands/actions);

7. Cy. Get (‘. The action – email ‘)

Get the specified DOM element using the SELECT contained in the GET input parameter.

The result: you get an input DOM element containing.action-email.

8. Type (‘[email protected]’)

Enter the specified character in the input field queried in step 7.

Instruction help document:

Docs. Cypress. IO/API/command…

The following keyboard events occur:

The final assert executes successfully:

More of Jerry’s original articles can be found in “Wang Zixi” :