Responsive breakpoint testing in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is responsive breakpoint testing?

It is testing a website or app at different screen sizes to make sure it looks and works well on all devices like phones, tablets, and desktops.

beginner

Why do we test at different breakpoints?

Because websites change layout and style at certain screen widths called breakpoints, testing ensures the site stays usable and pretty on all devices.

intermediate

How can Cypress help with responsive breakpoint testing?

Cypress can set the browser size to different widths and heights during tests, so you can check how your site behaves at each breakpoint automatically.

beginner

Example of setting viewport size in Cypress?

Use cy.viewport(width, height) to change the browser size. For example, cy.viewport(375, 667) sets the size to a small phone screen.

beginner

What should you check at each breakpoint during testing?

Check that all buttons, text, images, and menus are visible and usable. Also, check that no content is cut off or overlapping.

What does cy.viewport(1024, 768) do in Cypress?

A Waits for 1024 milliseconds

B Clicks a button with id 1024

C Sets the browser size to 1024 pixels wide and 768 pixels tall

D Opens a new tab with URL 768

cy.viewport(width, height) sets the browser window size to test responsive layouts.

Why is responsive breakpoint testing important?

A To speed up the website loading time

B To check if the website works well on different screen sizes

C To test backend server responses

D To check spelling mistakes

Responsive breakpoint testing ensures the site looks and works well on phones, tablets, and desktops.

Which of these is NOT a common breakpoint size?

A 5000px (super large screen)

B 768px (tablet)

C 1440px (large desktop)

D 320px (small phone)

5000px is not a typical breakpoint size used in responsive design.

In Cypress, how do you test multiple breakpoints efficiently?

A Use cy.viewport() with different sizes inside a loop or multiple tests

B Change the CSS manually each time

C Restart the browser for each size

D Use cy.click() to resize the window

Using cy.viewport() with different sizes in tests automates checking multiple breakpoints.

What should you NOT ignore when testing responsive breakpoints?

A Content visibility and layout

B Button functionality

C Text readability

D Page background color

While background color matters, the main focus is on content visibility, layout, and usability.

Explain how you would write a Cypress test to check a website at three different breakpoints.

Think about setting viewport sizes and running assertions for each.

Why is it important to test responsive breakpoints in automated tests rather than only manually?

Consider benefits of automation vs manual testing.