Cypress architecture (runs in browser) - Build an Automation Script

Verify Cypress test runs inside the browser and interacts with the web page

Preconditions (2)

Step 1: Open Cypress Test Runner

Step 2: Write a test that visits http://localhost:3000

Step 3: Click the button with id 'click-me'

Step 4: Verify that the text element with id 'message' changes to 'Button clicked!'

✅ Expected Result: The test runs inside the browser, clicks the button, and verifies the message text changes to 'Button clicked!'. The test passes.

Automation Requirements - Cypress

Assertions Needed:

Verify the page URL is correct after visit

Verify the button click triggers the expected text change

Best Practices:

Use cy.visit() to load the page

Use cy.get() with id selectors for elements

Use should() for assertions

Avoid hardcoded waits; rely on Cypress automatic waits

Write clear and simple test steps

Automated Solution

Cypress

describe('Cypress architecture test', () => {
  it('runs inside the browser and interacts with the page', () => {
    cy.visit('http://localhost:3000');
    cy.url().should('include', 'localhost:3000');
    cy.get('#click-me').click();
    cy.get('#message').should('have.text', 'Button clicked!');
  });
});

This test uses cy.visit() to open the web page inside the browser where Cypress runs.

We check the URL to confirm the page loaded correctly.

Then, we find the button by its id #click-me and click it.

Finally, we assert that the text element #message updates to 'Button clicked!'.

Cypress runs all commands inside the browser, so it can directly interact with the page DOM and listen to events.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(5000) instead of relying on Cypress automatic waits

Using non-unique or complex selectors instead of simple id selectors

Trying to run Cypress tests outside the browser environment

Bonus Challenge

Now add data-driven testing with 3 different button ids and expected messages

Show Hint