Running Your First Cypress Test: Execution & Debugging

Now that you’ve written your first Cypress test to search Google for QA Debug, it’s time to run it! This guide shows you how to execute your test, understand Cypress commands, and fix common issues. Let’s make your Cypress testing journey smoother!

Running Your Cypress QA Debug Test

Using the Cypress Test Runner

The Cypress Test Runner provides a visual interface for your tests. To start it, run:

npx cypress open

After launching the runner, follow these simple steps:

1. Click “E2E Testing”
2. Select a browser (Chrome works best for beginners)
3. Click on your “qadebug-search.cy.js” file

Once you click on your test file, Cypress will run your Google search test live in the selected browser. You’ll see each step happen in real time, which helps you understand what’s going on.

Running Tests in Headless Mode

For CI/CD pipelines or quick test runs, you can use Cypress in headless mode:

npx cypress run --spec "cypress/e2e/qadebug-search.cy.js"

This command runs your test without opening a browser window. Moreover, it automatically saves screenshots and videos of the test run.

Understanding Key Cypress Commands

Essential Commands in Your QA Debug Test

Let’s break down the main Cypress commands we used in our test:

Command	Purpose	Example
cy.visit()	Open a webpage	cy.visit(‘https://google.com’)
cy.get()	Finds elements	cy.get(‘input[name=”q”]’)
cy.contains()	Finds text	cy.contains(‘QA Debug’)
.type()	Enters text	cy.get(‘input’).type(‘text’)
.click()	Clicks elements	cy;get(‘button’).click()
.should()	Makes assertions	cy.url().should(‘include’, ‘qadebug.com’)

These commands form the building blocks of all Cypress tests. Furthermore, they handle waiting automatically, so your tests remain stable even on slow websites.

Improving Your QA Debug Test

Making Cookie Notice Handling More Robust

The cookie notice on QA Debug might change over time. Therefore, let’s make our handling more robust:

// More robust cookie notice handling
cy.get('body').then($body => {
  // Look for common cookie notice identifiers
  const cookieBannerExists = $body.find('div[class*="cookie"], div[class*="consent"], div[id*="cookie"], div[id*="consent"]').length > 0
  
  if (cookieBannerExists) {
    // Try various accept buttons
    cy.get('button:visible, a:visible').contains(/accept|accept all|agree|got it/i).then($button => {
      if ($button.length > 0) {
        cy.wrap($button).click({force: true})
      }
    })
  }
})

This approach looks for multiple possible cookie notice elements and buttons. As a result, it’s more likely to work even if the site changes.

Adding Retry Logic

Sometimes elements might not appear immediately. Consequently, we should add retry logic:

// Retry logic for flaky elements
const retryOptions = {
  timeout: 10000,
  interval: 500,
  errorMsg: 'Element not found after retries'
}

function retryUntilFound(selector, options = {}) {
  const opts = { ...retryOptions, ...options }
  let attempts = Math.floor(opts.timeout / opts.interval)
  
  function attempt(remaining) {
    if (remaining <= 0) return cy.log(opts.errorMsg)
    
    cy.get('body').then($body => {
      if ($body.find(selector).length > 0) {
        return cy.get(selector)
      }
      cy.wait(opts.interval)
      attempt(remaining - 1)
    })
  }
  
  return attempt(attempts)
}

// Usage
retryUntilFound('div.cky-consent-container').then($el => {
  if ($el) cy.wrap($el).find('button.cky-btn-accept').click({force: true})
})

This function keeps trying to find an element until it appears or the timeout is reached. Therefore, it makes our test more reliable on slow-loading pages.

Fixing Common Cypress Test Issues

Problem: Google Search Results Change

Google results can change based on location, time, and other factors. To fix this:

// More flexible approach to finding QA Debug
cy.get('#search').should('be.visible')
cy.contains('qadebug.com').then($link => {
  if ($link.length > 0) {
    cy.wrap($link).click()
  } else {
    // Alternative approach - type URL directly
    cy.visit('https://qadebug.com')
  }
})

This code first looks for the normal search result. However, if it’s not found, it visits the URL directly. As a result, our test continues working regardless of search results.

Problem: Cookie Notice Changes

Websites often update their cookie notices. Therefore, we need a flexible approach:

// Flexible cookie notice handling
cy.url().should('include', 'qadebug.com')
cy.get('body').then($body => {
  // Check for various possible cookie notice selectors
  const cookieSelectors = [
    'div.cky-consent-container',
    '[class*="cookie-notice"]',
    '[class*="cookie-banner"]',
    '[id*="cookie-consent"]'
  ]
  
  // Try each selector
  for (const selector of cookieSelectors) {
    if ($body.find(selector).length > 0) {
      // Found a cookie notice, now look for buttons
      cy.get(selector).find('button, a').contains(/accept|agree|got it/i, {matchCase: false})
        .then($btn => {
          if ($btn.length > 0) {
            cy.wrap($btn).click({force: true})
            return false // Break the loop
          }
        })
    }
  }
})

This approach tries multiple possible selectors for cookie notices and buttons. Therefore, it’s more resistant to site changes.

Advanced Cypress Testing Techniques

Checking Site Navigation After Login

Once on the QA Debug site, you might want to test navigation:

// Test site navigation
cy.get('nav').should('be.visible')
cy.get('nav a').contains('Blog').click()
cy.url().should('include', '/blog')

Taking Screenshots at Key Points

It’s helpful to capture screenshots at important moments:

// Take screenshots at key points
cy.screenshot('google-search-results')
cy.screenshot('qadebug-homepage')

Related Cypress Testing Articles

Check out our other Cypress articles to build your testing skills:

• Introduction to Cypress Testing Framework
• Getting Started with Cypress: Installation Guide
• Configuring Cypress for Effective Web Testing
• Building Your First Cypress Google Test

Conclusion

Great job! You’ve now learned how to run a Cypress test that searches Google for QA Debug and handles cookie notices. You’ve discovered how to:

1. Execute tests in the Cypress Test Runner
2. Run tests in headless mode
3. Handle dynamic website elements
4. Make tests more robust with retry logic
5. Deal with changing website features

Remember, real-world testing requires flexibility. Therefore, write your tests to handle variations in website behavior. Meanwhile, check out our other Cypress tutorials to expand your testing knowledge.

Ready for more advanced topics? In our next article, we’ll explore Cypress test execution and debugging techniques in greater detail!