Cypress Google Test Tutorial: Build Your First Test

Posted on by

Are you ready to start testing with Cypress? In this guide, we’ll create a simple test that uses Google to search for a real website, navigate to it, and handle common website elements. You’ll learn how to set up a test file, interact with search engines, and validate website elements – all using Cypress testing framework.

Setting Up Your First Cypress Test File

To begin, let’s create a new test file in your project. First, navigate to your Cypress project folder. Then, follow these steps:

  1. Open the cypress/e2e folder
  2. Create a new file named qadebug-search.cy.js
  3. Open this file in your editor

Every Cypress test needs a basic structure. Copy this starter code to your file:

describe('QA Debug Website Test', () => {
  it('searches for QA Debug on Google and validates the site', () => {
    // Test steps will go here
  })
})

The describe block groups related tests, while each it block represents a single test case. This structure helps organize your Cypress tests logically.

Writing Your Google Search and Site Navigation Test

Now let’s add actual test steps. Our Cypress test will:

  • Visit Google.com
  • Handle any cookie consent dialogs
  • Search for “QA Debug”
  • Click on the QA Debug website link
  • Handle cookie notices on the QA Debug site

Opening Google Website

First, we need to visit Google:

describe('QA Debug Website Test', () => {
  it('searches for QA Debug on Google and validates the site', () => {
    // Visit Google
    cy.visit('https://www.google.com')
    
    // More steps will come next
  })
})

When you run this Cypress test, it will open Google in the test browser. However, you’ll likely see a cookie consent dialog that we need to handle.

Handling Google Cookie Consent Forms

Google typically shows a cookie consent form. Therefore, we need to dismiss it before continuing our Cypress test:

// Accept cookies if the dialog appears
cy.get('button').contains('Accept all').then($button => {
  if ($button.length > 0) {
    cy.wrap($button).click()
  }
})

This code looks for an “Accept all” button and clicks it if found. As a result, we can continue with our Cypress testing without interruptions.

Searching for QA Debug

Next, let’s search for “QA Debug”:

// Type our search term
cy.get('input[name="q"]').type('QA Debug')

The cy.get() command finds elements on the page. In this case, we’re finding Google’s search input box and typing our search term.

Submitting the Search

After typing our search term, we need to press Enter:

// Press Enter to search
cy.get('input[name="q"]').type('{enter}')

Clicking on the QA Debug Website

Now, we need to find and click on the QA Debug website link in the search results:

// Click on QA Debug link
cy.contains('https://qadebug.com').click()

This finds the text matching the QA Debug URL and clicks on it. Consequently, Cypress will navigate to the QA Debug website.

Handling Cookie Notice on QA Debug

Once we’re on the QA Debug website, we might see a cookie consent modal. Let’s handle it:

// Handle cookie notice on QA Debug if it appears
cy.get('body').then($body => {
  // Check if the privacy notice modal is visible
  if ($body.find('div.cky-consent-container.cky-box-bottom-left').length > 0) {
    // Check if it has the expected title
    cy.contains('We value your privacy').should('be.visible')
    // Click the "Accept All" button
    cy.get('body > div.cky-consent-container.cky-box-bottom-left > div > div > div > div.cky-notice-btn-wrapper > button.cky-btn.cky-btn-accept').click({force: true})
  }
})

This code first checks if the cookie notice exists, then verifies its title, and finally clicks the “Accept All” button. Furthermore, we use {force: true} to ensure the click works even if the element might be covered by something else.

The Complete Cypress Test for Google Search and QA Debug

Here’s our complete Cypress test:

describe('QA Debug Website Test', () => {
  it('searches for QA Debug on Google and validates the site', () => {
    // Visit Google
    cy.visit('https://www.google.com')
    
    // Accept cookies if the dialog appears
    cy.get('button').contains('Accept all').then($button => {
      if ($button.length > 0) {
        cy.wrap($button).click()
      }
    })
    
    // Type our search term
    cy.get('input[name="q"]').type('QA Debug')
    
    // Press Enter to search
    cy.get('input[name="q"]').type('{enter}')
    
    // Click on QA Debug link
    cy.contains('https://qadebug.com').click()

    // Handle cookie notice on QA Debug if it appears
    cy.get('body').then($body => {
      // Check if the privacy notice modal is visible
      if ($body.find('div.cky-consent-container.cky-box-bottom-left').length > 0) {
        // Check if it has the expected title
        cy.contains('We value your privacy').should('be.visible')
        // Click the "Accept All" button
        cy.get('body > div.cky-consent-container.cky-box-bottom-left > div > div > div > div.cky-notice-btn-wrapper > button.cky-btn.cky-btn-accept').click({force: true})
      }
    })
    
    // Verify we're on the QA Debug site
    cy.url().should('include', 'qadebug.com')
  })
})

Adding More Validations

Let’s add more validations to ensure we’re on the right page:

// Additional validations for QA Debug site
cy.url().should('include', 'qadebug.com')
cy.title().should('contain', 'QA Debug')
cy.get('header').should('be.visible')

These checks verify the URL, title, and presence of a header element on the page. As a result, we can be confident our test is working correctly.

Related Cypress Articles

Want to learn more about Cypress testing? Check out these related articles:

In part two of this tutorial, we’ll cover how to run your test using the Cypress Test Runner, understand key Cypress commands, and troubleshoot common issues.

Ready to continue your Cypress journey? Let’s keep building your testing skills!