Example of Using cy.get() in A Cypress Test Script

cy.get() method is used to retrieve one or more DOM elements by selector or alias. The querying behavior of cy.get() is similar to how jQuery() method works in jQuery.

get

cy.get() has 4 ways to use it, such as:

1. cy.get(selector)
2. cy.get(alias)
3. cy.get(selector, options)
4. cy.get(alias, options)

1. cy.get(selector)

A selector used to filter matching DOM elements. Here is a sample test script for implementing cy.get(selector):

describe('My First Test', () => {
  it('Search Google Maps', () => {
    cy.visit('https://maps.google.com')
 
 //cy.pause()
 
 // Get an input, type something then click button Search
    cy.get('.searchbox-hamburger-container').type('Golden Gate Bridge')
 cy.get('.searchbox-searchbutton-container').click() 
 
 //Verify search result (URL)
 cy.url().should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z')
  })
})

test result is OK

2. cy.get(alias)

Alias element is like variable. Here is a sample test script for implementing cy.get(alias):

//getAlias.js
describe('My First Test', () => {
  it('Search Google Maps', () => {
    cy.visit('https://maps.google.com')
 
    //Get an input, type something
    cy.get('.searchbox-hamburger-container').as('searchboxAlias')
    //Search Button
    cy.get('.searchbox-searchbutton-container').as('searchbuttonAlias')
    //Later retrieve the alias 
    cy.get('@searchboxAlias').type('Golden Gate Bridge')
    cy.get('@searchbuttonAlias').click() 
 
    //Verify search result (URL)
    cy.url().should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z')
  })
})

test result is OK

3. cy.get(selector, options)

You can pass in an options object to change the default behavior of cy.get() with cy.get(selector, options) or cy.get(alias, options).

Option List in cy.get()

defaultCommandTimeout options object

Here is a sample test script for implementing cy.get(selector, options) and options object timeout 6000 milliseconds:

//googlemapsSample.js
describe('My First Test', () => {
  it('Search Google Maps', () => {
    cy.visit('https://maps.google.com')
 
    //Get an input, type something then click button Search
    cy.get('.searchbox-hamburger-container', {timeout: 6000}).type('Golden Gate Bridge')
    cy.get('.searchbox-searchbutton-container').click() 
 
    //Verify search result (URL)
    cy.url().should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z')
  })
})

test result is OK

4. cy.get(alias, options)

Here is a sample test script for implementing cy.get(alias, options):

//getAliasOptions.js
describe('My First Test', () => {
  it('Search Google Maps', () => {
    cy.visit('https://maps.google.com')
 
    //Get an input, type something
    cy.get('.searchbox-hamburger-container').as('searchboxAlias')
    //Search Button
    cy.get('.searchbox-searchbutton-container').as('searchbuttonAlias')
    //Later retrieve the alias 
    cy.get('@searchboxAlias', {timeout:6000}).type('Golden Gate Bridge')
    cy.get('@searchbuttonAlias').click() 
 
    //Verify search result (URL)
    cy.url().should('eq', 'https://www.google.com/maps/search/Golden+Gate+Bridge/@37.8199286,-122.4804438,17z')
  })
})

test result is OK

Thanks for reading.