First Cypress test - Build an Automation Script

Verify the homepage loads and displays the main heading

Preconditions (2)

Step 1: Open the browser and navigate to http://localhost:3000

Step 2: Check that the page loads successfully

Step 3: Locate the main heading element with the selector 'h1'

Step 4: Verify that the main heading text is 'Welcome to Our Site'

✅ Expected Result: The homepage loads without errors and the main heading displays the text 'Welcome to Our Site'

Automation Requirements - Cypress

Assertions Needed:

Verify the page URL is correct

Verify the main heading element exists

Verify the main heading text equals 'Welcome to Our Site'

Best Practices:

Use cy.visit() to open the page

Use cy.get() with a semantic selector for the heading

Use should() assertions for checking existence and text

Keep tests isolated and independent

Automated Solution

Cypress

describe('First Cypress Test - Homepage', () => {
  it('should load the homepage and display the main heading', () => {
    cy.visit('http://localhost:3000');
    cy.url().should('eq', 'http://localhost:3000/');
    cy.get('h1').should('exist').and('have.text', 'Welcome to Our Site');
  });
});

This test suite named First Cypress Test - Homepage contains one test case.

We use cy.visit() to open the homepage URL.

Then, cy.url().should('eq', ...) checks that the browser is on the correct page.

Next, cy.get('h1') finds the main heading element. The should('exist') assertion confirms it is present.

Finally, and('have.text', 'Welcome to Our Site') verifies the heading text matches exactly.

This approach uses clear selectors and assertions, making the test easy to read and maintain.

Common Mistakes - 4 Pitfalls

{'mistake': "Using cy.get() with a vague or incorrect selector like '.header' instead of 'h1'", 'why_bad': 'It may select the wrong element or fail if the class changes, making the test flaky.', 'correct_approach': "Use semantic selectors like 'h1' for main headings to keep tests stable and clear."}

Not asserting the URL after visiting the page

{'mistake': "Using .should('contain', 'Welcome') instead of .should('have.text', 'Welcome to Our Site')", 'why_bad': 'Partial text checks can pass even if the full text is incorrect, reducing test accuracy.', 'correct_approach': "Use exact text match with 'have.text' to ensure the heading is exactly as expected."}

{'mistake': 'Not chaining assertions and writing multiple cy.get() calls unnecessarily', 'why_bad': 'This makes tests longer and harder to read.', 'correct_approach': "Chain assertions like .should('exist').and('have.text', ...) for clarity and efficiency."}

Bonus Challenge

Now add data-driven testing to check the homepage heading for three different URLs with expected headings.

Show Hint

Practice

1. What is the main purpose of the cy.visit() command in a Cypress test?

easy

A. To run the test suite

B. To check if an element is visible

C. To open a webpage in the test browser

D. To write test descriptions

Solution

1. Step 1: Understand cy.visit() usage

   The cy.visit() command is used to open a webpage URL in the Cypress test browser.

2. Step 2: Compare with other options

   Options A, B, and C describe other actions unrelated to opening a webpage.

3. Final Answer:

   To open a webpage in the test browser -> Option C

4. Quick Check:

   cy.visit() opens page [OK]

Hint: Remember: visit means open page URL [OK]

Common Mistakes:

• Confusing cy.visit() with assertions
• Thinking it runs tests instead of opening pages
• Mixing it with test description blocks

2. Which of the following is the correct syntax to start a Cypress test block?

easy

A. function test() { describe('Test name') }

B. describe('Test name', () => { it('does something', () => { }) })

C. test('Test name', () => { })

D. run('Test name', () => { })

Solution

1. Step 1: Identify correct Cypress test structure

   Cypress tests use describe blocks to group tests and it blocks for individual tests, both with arrow functions.

2. Step 2: Check syntax correctness

   describe('Test name', () => { it('does something', () => { }) }) correctly shows describe with an it inside using arrow functions. Others use invalid or unsupported syntax.

3. Final Answer:

   describe('Test name', () => { it('does something', () => { }) }) -> Option B

4. Quick Check:

   Use describe and it blocks [OK]

Hint: Tests start with describe and it blocks [OK]

Common Mistakes:

• Using non-Cypress functions like test() or run()
• Missing arrow functions or braces
• Incorrect nesting of blocks

3. Given the following Cypress test code, what will be the test result if the element with id #welcome is visible?

describe('Visibility test', () => {
  it('checks welcome message', () => {
    cy.visit('https://example.com')
    cy.get('#welcome').should('be.visible')
  })
})

medium

A. Test fails because cy.visit() is missing

B. Test passes even if the element is not visible

C. Test fails because should is used incorrectly

D. Test passes because the element is visible

Solution

1. Step 1: Analyze test steps

   The test visits the page, then checks if the element with id #welcome is visible using should('be.visible').

2. Step 2: Understand assertion behavior

   If the element is visible, the assertion passes and so does the test. The code syntax is correct and cy.visit() is present.

3. Final Answer:

   Test passes because the element is visible -> Option D

4. Quick Check:

   Visible element means test passes [OK]

Hint: Visible element + should('be.visible') = pass [OK]

Common Mistakes:

• Assuming test fails without cy.visit()
• Thinking should is wrong syntax
• Ignoring element visibility status

4. Identify the error in this Cypress test code:

describe('My Test', () => {
  it('opens page', () => {
    cy.visit('https://example.com')
    cy.get('.button').should('visible')
  })
})

medium

A. Incorrect assertion keyword, should be should('be.visible')

B. Missing parentheses in should('visible')

C. Wrong selector syntax for class

D. Missing it block inside describe

Solution

1. Step 1: Check assertion syntax

   The assertion should('visible') is incorrect. The correct form is should('be.visible') to check visibility.

2. Step 2: Verify other parts

   The selector .button is correct for class, and it block is present. So only the assertion keyword is wrong.

3. Final Answer:

   Incorrect assertion keyword, should be should('be.visible') -> Option A

4. Quick Check:

   Use should('be.visible') for visibility [OK]

Hint: Use exact assertion keywords like 'be.visible' [OK]

Common Mistakes:

• Using 'visible' instead of 'be.visible'
• Confusing selector syntax for classes
• Omitting it block inside describe

5. You want to write a Cypress test that visits https://example.com, clicks a button with class .submit-btn, and then checks if a success message with id #success-msg is visible. Which of the following test codes correctly implements this?

hard

A. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('.submit-btn').click()
cy.get('#success-msg').should('be.visible')
})
})

B. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('#submit-btn').click()
cy.get('.success-msg').should('visible')
})
})

C. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.click('.submit-btn')
cy.get('#success-msg').should('be.visible')
})
})

D. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('.submit-btn').click()
cy.get('#success-msg').should('visible')
})
})

Solution

1. Step 1: Verify selectors and commands

   describe('Submit test', () => { it('clicks and checks success', () => { cy.visit('https://example.com') cy.get('.submit-btn').click() cy.get('#success-msg').should('be.visible') }) }) uses correct selectors: .submit-btn for class and #success-msg for id. It uses cy.get().click() correctly.

2. Step 2: Check assertion syntax

   The code uses should('be.visible'), which is the correct assertion for visibility. Other options have wrong selectors or incorrect assertion keywords.

3. Final Answer:

   describe('Submit test', () => { it('clicks and checks success', () => { cy.visit('https://example.com') cy.get('.submit-btn').click() cy.get('#success-msg').should('be.visible') }) }) -> Option A

4. Quick Check:

   Correct selectors + click + should('be.visible') [OK]

Hint: Use correct selectors and should('be.visible') for checks [OK]

Common Mistakes:

• Mixing class and id selectors
• Using cy.click() instead of cy.get().click()
• Wrong assertion keyword 'visible' instead of 'be.visible'