Waltir
By: Waltir

Blocking Ad Traffic In Cypress

Cover Image for Blocking Ad Traffic In Cypress

Blocking ad traffic in Cypress.io automated test scripts can be important to ensure the reliability and stability of testing environment. In this tutorial, we will show you how to block ads in Cypress.io automated test scripts.

Step 1: Install the Cypress-AdBlock Package

The first step is to install the "cypress-adblock" package. To install the package, run the following command in the terminal:

npm install cypress-adblock

Step 2: Add the Ad-Blocker to the Cypress Configuration File

The next step is to add the ad-blocker to the Cypress configuration file. Open the "cypress.json" file and add the following code:

{
  "baseUrl": "https://example.com",
  "chromeWebSecurity": false,
  "experimentalFetchPolyfill": true,
  "defaultCommandTimeout": 10000,
  "supportFile": "cypress/support/index.js",
  "env": {
    "adBlock": true
  }
}

In this code, we have set the "adBlock" option to true to enable the ad-blocker.

Step 3: Create a Test That Blocks Ads

Now we can create a test that uses the ad-blocker to block ads. In this example, we will use Google as an example site to block ads. Here is the code for the test:

describe('Google Test', () => {
  beforeEach(() => {
    cy.visit('https://www.google.com')
    cy.wait(1000)
  })

  it('should block ads', () => {
    cy.get('#hplogo').should('be.visible')
    cy.adBlock()
    cy.get('#hplogo').should('be.visible')
  })

  it('should search for a term', () => {
    cy.get('input[name="q"]').type('test{enter}')
    cy.get('#search').should('contain', 'test')
  })
})

This test opens Google, blocks ads using the "adBlock" command, performs a search, and checks that the search results contain the word "test".

Step 4: Run the Test

To run the test, open the terminal and navigate to the project directory.

Then run the following command:

cypress run --headless --browser chrome

This command runs the test and blocks ads on Google. If the test passes, it means that ads were successfully blocked, and the test ran without interference from ads.

Blocking ad traffic within Cypress.io automated test scripts can be crucial to ensure the reliability and stability of our testing environment. By following the steps outlined in this tutorial, you can easily install and use an ad-blocker in your tests, which can help reduce the risk of false positives and ensure that your tests run smoothly.

More Posts

Cover Image for Blocking Ad Traffic In Nightwatch JS
Blocking Ad Traffic In Nightwatch JS
Waltir
By: Waltir

Example showing how you can block unwanted ad traffic in your Nightwatch JS tests....

Cover Image for Blocking Ad Traffic In Cypress
Blocking Ad Traffic In Cypress
Waltir
By: Waltir

Example showing how you can block unwanted ad traffic in your Cypress tests....

Cover Image for Three Ways To Resize The Browser In Nightwatch
Three Ways To Resize The Browser In Nightwatch
Waltir
By: Waltir

Outlining the three different ways to resize the browser in Nightwatch JS with examples....

Cover Image for Happy Path VS Sad Path Testing
Happy Path VS Sad Path Testing
Waltir
By: Waltir

As a test engineer it is crucial that both happy path and sad path use cases have been considered and fully tested...