Aliasing

We’ve looked at how to select elements in the previous lesson using the cy.get command. However, there’s one problem with this.Selectors are bound to change from time to time, and using the same selectors in different places means we have to update the test suite in multiple places to avoid flakes. This is what aliases aim to solve.

---

What are aliases?

Aliasing selectors is a way to assign a name to an element that can be referenced for later use. This way, we only need to query using the selector once, but can use the alias throughout the test multiple times. If we need to update the selector, we will only have to do it in one place.

---

Creating aliases

To create aliases in Cypress, we can use the .as command on an element:

cy.get('.download').as('downloadButton');

Later in the test cases, we can reference the alias by prefixing it with an @ symbol:

cy.get('@downloadButton').click();
cy.get('@downloadButton').should('be.disabled');

---

Further improving on selectors

There are two more ways to enhance our tests so we can improve on our selectors.

Outsourcing selectors

First, we can outsource our selectors to the top of the test files:

const selectors = {
    downloadBanner: '.download-banner',
    downloadButton: '.download'
};

We can also outsource them to an entirely new configuration file, and import the necessary selectors from there:

export const downloadBanner = '.download-banner';
export const downloadButton = '.download';

// Later in your test cases, you can import the necessary selectors:
import {
    downloadBanner,
    downloadButton
} from 'selectors'

Referencing data attributes

To reduce the likelihood of flakes, it’s recommended to use data attributes as selectors. These are less likely to change. For the sake of testing, we can also create custom data attributes that we know won’t change in the future. A common convention is to use data-test-id or data-testid attributes.

const selectors = {
    downloadButton: [data-key="1"]
    // Even better to use a custom `data` attribute for the purpose of testing
    downloadButton: [data-testid="downloadButton"]
};

Testing elements using aliases

Let’s put theory into practice and expand our previous cookie policy test with the dissmissCookiePolicy step.

First, let’s create a selectors object at the top of the step file so we can reference everything in one place.

const selectors = {
    cookiePolicyBanner: '#onetrust-banner-sdk',
    cookiePolicyBannerButton: '#onetrust-accept-btn-handler'
};

export const verifyCookiePolicyPresence = () => {
    cy.get(selectors.cookiePolicyBanner).as('cookiePolicyBanner');
};

We have now also introduced a selector for the banner’s button. This is what we want to press in the next step to verify if the banner is dismissible. We’ve also aliased the banner itself, so we can use a shorter and readable version for any further cy.get command. Putting this all together, we get the following:

export const dismissCookiePolicy = () => {
    cy.get(selectors.cookiePolicyBannerButton).click();
    cy.get('@cookiePolicyBanner').should('not.be.visible');
};

Note that the element will still exist in the DOM. We can call not.be.visible to check visibility.