JavaScript required to learn Cypress

puneet vashisth
4 min readApr 1, 2024

--

We all know that Cypress End-to-end testing tool is getting more popularity day by day in the market. Cypress document is itself enough to start and work on it but if you want Cypress to exceed your expectations and really work for you in a way that makes your life as an automation engineer as easy as possible. Then you need to take some time to brush up on some JavaScript fundamentals.

It can be hard to know where to start or even know what is relevant to you so here is the introduction to some core features of the language that you’ll need to be familiar with to work with Cypress on a daily basis.

Var, Let & Const

The var keyword was used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

The var keyword should only be used in code written for older browsers.

When to Use var, let, or const?

1. Always declare variables

2. Always use const if the value should not be changed

3. Always use const if the type should not be changed (Arrays and Objects)

4. Only use let if you can't use const

5. Only use var if you MUST support old browsers.

What is Good?

let and const have block scope.

let and const can not be redeclared.

let and const must be declared before use.

let and const does not bind to this.

let and const are not hoisted.

JavaScript Promise

“I Promise a Result!”

Producing code is code that can take some time

Consuming code is code that must wait for the result

A Promise is an Object that links Producing code and Consuming code.

In Cypress, Promises are commonly used to handle asynchronous actions, such as making HTTP requests or waiting for elements to appear on the page. Since Cypress commands are asynchronous, they return Promises or use Chai assertions, which are also based on Promises, to handle assertions.

Here are some common use cases for Promises in Cypress:

Handling Asynchronous Commands:

cy.get('.selector').then(($element) => {
// Perform actions with the element
});

Making HTTP Requests:

cy.request('GET', 'https://api.example.com/data').then((response) => {
// Handle the response
});

Chaining Commands:

cy.get('.selector').then(($element) => {
// Perform actions with the element
}).then(() => {
// Another action
});

Custom Assertions:

cy.get('.selector').should(($element) => {
expect($element).to.have.length(1);
});

Using then with Cypress Commands:

cy.get('.selector').then(($element) => {
// Use another Cypress command within the promise
cy.wrap($element).click();
});

Using Async/Await (Especially useful in modern JavaScript):

it('should do something', async () => {
const element = await cy.get('.selector');
// Perform actions with the element
});

Remember, Cypress automatically waits for commands and assertions to complete before moving on to the next step. So, even though Promises are used to handle asynchronous actions, you don’t always need to explicitly chain .then() calls unless you need to perform specific actions after an asynchronous operation completes.

Cypress selectors

In Cypress, you can access and interact with elements on the page using various methods. Here are some common ways to access objects (elements) in Cypress:

Using Selectors: Cypress provides a wide range of selector options similar to jQuery. You can select elements by tag name, class, ID, attribute, etc.

// By class
cy.get('.my-class').click();

// By ID
cy.get('#my-id').click();

// By data attribute
cy.get('[data-testid="my-element"]').click();

Using XPath: Although not the preferred method, Cypress also supports XPath selectors.

cy.xpath('//button[contains(text(),"Submit")]').click();

Using Alias: You can alias an element for later use in your test.

cy.get('.my-element').as('myElement');
cy.get('@myElement').click();

Using Parent-Child Relationships: You can narrow down the selection by specifying parent-child relationships.

cy.get('.parent-class').find('.child-class').click();

Using Within: You can limit the scope of your search using within().

cy.get('.parent-class').within(() => {
cy.get('.child-class').click();
});

Using Contains: If you’re looking for an element with specific text content, you can use contains().

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

Using Custom Attributes: If elements have custom attributes, you can select them based on those attributes.

cy.get('[data-custom="value"]').click();

Using Indexing: You can select elements based on their index.

cy.get('ul li').eq(2).click(); // Selects the third element

Apart from this above information, rest of the topics like loops, conditional statement, Array etc will remain same as you might be using with any other tools. For the detailed Cypress integration please refer to article https://medium.com/@puneetvashisth/cucumber-integration-with-cypress-9465db0fde83. Hope you enjoyed this article and please share any feedback which requires improvement in the article. I would be very happy to hear the improvements. Happy Learning!! :)

--

--

puneet vashisth

Sound experience in automation tool | Cypress JS based automation tool | Karate API automation | Selenium | Javascript | Typescript | Cucumber | BDD approach |