Cypress is derived from node.js, which is based on JavaScript. Cypress commands are synchronous in nature since they are dependent on the node server. Asynchronous flow means that the test step does not depend on its prior step for execution.
There is no dependency and each of the steps is executed as a standalone identity. Though the test steps are arranged in a sequence, an individual test step does not consider the outcome of the previous step and simply executes itself.
Example
Following is an example of asynchronous behavior in Cypress −
// test suite
describe('Adglob', function () {
it('Scenario 1', function (){
// test step to launch a URL
cy.visit("https://accounts.google.com")
// identify element
cy.get('h1#headingText').find('span').should('have.text', 'Sign in')
cy.get('h1#headingText').find('span').then(function(e){
const t = e.text()
// get in Console
console.log(t)
})
// Console message
console.log("Adglob-Cypress")
})
})
Promise
Right-click on Test Runner and click on Inspect, and we can verify results in the Console. Here, Adglob-Cypress (an earlier step) is logged in the Console before Sign – in (step added later).
Cypress commands are designed in such a way that every step is executed in sequence and they are not triggered simultaneously. But, they are lined up one behind another. Thereby, it makes the flow synchronous. This is achieved with Promise.
In the above example, console.log is a pure JavaScript statement. It does not have the ability to line up and wait similar to Cypress commands. The promise allows us to execute Cypress commands in serial mode.
Modes in Promise
A Promise has three modes to categorize the state of command execution. They are as follows −
- Resolved − This outcome occurs, if the test step runs successfully.
- Pending − This is the outcome, if the test step run result is being awaited.
- Rejected − This is the outcome, if the test step runs unsuccessfully.
A Cypress command gets executed, only if the prior step has been executed successfully or a resolved promise response is received. Then, the method is used to implement Promise in Cypress.
Example
Following is an example of Promise in Cypress −
describe('Adglob Test', function () {
it('Promise', function (){
return cy.visit('https://accounts.google.com')
.then(() => {
return cy.get('h1#heading');
})
})
})
Cypress implementation for Promise is encapsulated and not visible. Thus, it helps to have a more compact code. Also, we do not have to consider the state of Promise, while automating the tests.
Implementation without Promise
The following command explains how an implementation can be done without promise in Cypress −
describe('Adglob Test', function () {
it('Without Promise', function (){
cy.visit('https://accounts.google.com')
cy.get('h1#heading')
})
})