Testing Soft Age Gate with Cypress

I will demonstrate how to test the Soft Age Gate feature with Cypress in this article. I will use the IQOS website, which I have worked on for a while, as an example.

When you try to enter the IQOS website, you will first go through the Soft Age Gate (SAG) process. Basically, the user is requested to confirm that they are adults (since the tobacco and vaping products promoted on the website aren’t for underage people).

The QA community believes that every process the user must go through as well as every process that is stable (not changing frequently or at all) should be automated while testing. SAG is one of those processes that every user who wants to access the website must go through.

What is the Soft Age Gate about?

SAG ensures the website adheres to legal regulations regarding the sale and marketing of age-restricted products. Also, it provides a smoother, less intrusive experience for users while still verifying their eligibility to view content. A less disruptive age verification process can help reduce bounce rates and improve user retention and conversion rates.

On IQOS websites, there are 2 types of SAG:

1. The first type is where the user has to answer “Are you 18 years old or older?” with a yes or no answer.
2. The second type is a bit more sophisticated. It requests the user to insert their month and year of birth.

Here, I will demonstrate the testing of the second SAG type.

What are we actually testing?

Our goal is to simulate user behavior with Cypress. This means that Cypress will have to click on the month and the year field, choose the proper month and year from the drop-down menu, and confirm it. Finally, it has to go through the SAG process successfully and open the IQOS homepage.

Let’s break this down in a few steps:

1. First, Cypress must open the following path: https://www.iqos.com/gb/en/home.html?gr=false. The testing tool must then go through the SAG process before arriving at the given path.
2. Click on the month field.
3. Choose January from the month drop-down list.
4. Click on the year field.
5. Choose 1999 from the year drop-down list.
6. Click on the Confirm button.
7. Successfully open the IQOS Homepage.

Let’s convert the above steps into code

Here is a Cypress code that perfectly follows the steps listed above:

describe('Soft Age Gate Test', () => {
  it('should fill in the month and year of birth and click confirm', () => {
    // Visit the specified URL
    cy.visit('https://www.iqos.com/gb/en/home.html?gr=false');

    // Select the month from the dropdown
    cy.get('#dropdownMonths')
      .parent().click();
	cy.get('#sag-month-01').click({ force: true });

    // Select the year from the dropdown
    cy.get('#dropdownYears')
      .parent().click();
	cy.get('#sagyear1999').click({ force: true });

    // Click the confirm button
    cy.get('span.sav-btn-text:contains("Confirm")').click();
  });
});