What are responsive design test cases and test scenarios?

Can anyone please tell me what are responsive design test cases and test scenarios.

Responsive web design is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.

Some test scenarios for responsive test design are as follows:

  • To verify all the images on the web page are displayed properly on all the different devices and resolution.
  • To verify text and headings on the web page are properly aligned.
  • To verify all the clickable links on the web page are readable and work as expected.
  • To verify scrolling of the web page works as expected.
  • To verify if there are input boxes and text areas to enter data then we need to make sure that the text entered is displayed properly on the web page and they are aligned as expected.
  • To verify image size, Font size and font type are consistent across all the web pages.
  • To verify if contents of the page are displayed consistent on all resolutions.
  • To verify the color changes after hover over the elements.
  • To verify the consistency of color combination on different resolutions.
  • To verify images, text, different controls are not going beyond the screen border.
  • To verify if there should not be any horizontal scrolling bar since everything should be fit according to the size of the screen.
  • To verify on rotating your mobile device, all the contents should be rotated and displayed as expected without any technical glitch.
  • To verify if the user able to click on clickable area.
  • To verify padding of elements on the edges.
  • To verify if enter text in input box are displayed as expected without any UI glitches.

Platforms like LambdaTest provides you features where you can perform Responsive testings, Smart Visual UI testing, Real Time testing. over 1400+ browsers and OS combinations.