Test Responsive Design: Drag Browser vs Device Toolbar

Programming
, , , ,
1

I’m seeing UI differences between manually resizing the browser window and using the “Toggle device toolbar” even though the width and height values of the viewport seem to be identical. To illustrate, here is an example:

  • When I manually resize the window (by dragging), the page looks like this:
[![enter image description here](https://i.stack.imgur.com/qyJBx.png)](https://i.stack.imgur.com/qyJBx.png)
  • And when I toggle the device toolbar, the page looks like this:
[![enter image description here](https://i.stack.imgur.com/uZItv.png)](https://i.stack.imgur.com/uZItv.png)

The “Toggle device toolbar” appears to be the accurate representation of what the UI would actually look like, but when I run the Cypress tests, the snapshots look like the first image - when I resize the window by dragging. As a result, some of the buttons end up not being visible on the page, but they are visible when I actually open the page on any device (latop, tablet, mobile, etc.).

I’m wondering why this is happening. Here is a link to the actual website in question: https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005. Does anyone have any insight into this?

2

The issue you are experiencing could be due to CSS media queries or other responsive design techniques used on the website.

When manually resizing the browser window, the website may not be triggering the CSS rules for smaller screen sizes, resulting in a layout that does not match the “Toggle device toolbar” view.

To confirm if this is the case, you can inspect the CSS styles applied to the elements in question. Look for media queries that target specific screen sizes and check if they are being applied correctly.

Additionally, make sure that the Cypress tests are running in a consistent environment with the same viewport size as the “Toggle device toolbar” view. You can set the viewport size explicitly in your Cypress tests to match the desired device dimensions.

If the issue persists, it’s possible that there may be other factors at play, such as JavaScript interactions or dynamic content that affect the layout differently in the two scenarios. In such cases, further investigation would be needed to identify the exact cause of the discrepancy.