Skip to Main content

Sample: Viewport-Specific Testing

This sample shows how the same feature can need different scenarios on phone, tablet, and desktop layouts. It uses the theme toggle as a small but realistic example, because responsive UI likes to move the goalposts just when your tests thought they were settled.

Responsive interfaces rarely behave like one page in three jackets. This sample shows how to test the same feature across viewport-specific states without pretending mobile and desktop are interchangeable.

Use case

Frequently, certain sections of the website exhibit variations across mobile, tablet, and desktop interfaces. For instance, the Header block may be entirely visible on desktop, whereas on mobile, it remains hidden until the user interacts with the Hamburger icon. When assessing the functionality of such a Header, distinct test scenarios tailored to each viewport are essential.

Test case

Validation of Theme Toggle Button Functionality.

Objective: To confirm the proper functioning of the theme toggle button located at the upper part of this website.

  1. Locate the Sun or Moon icon positioned at the top-right corner of this website.

  2. On mobile devices, clicking the Hamburger icon should reveal the theme toggle icon.

  3. After clicking the Sun icon, the site's appearance should change to Light mode, and the icon should be replaced by the Moon icon.

  4. After clicking the Moon icon, the site's appearance should change to Dark mode, and the icon should be replaced by the Sun icon.

Note: The test assumes the presence of the Sun or Moon toggle button and its behavior as described. Any deviation from the expected behavior should be considered a defect.

Test suite

To create the test suite, follow these steps:

  1. Create a file named visual_tests/theme-toggle.tests.yaml in your test project.

  2. Add the following content to the file:

    scenarios:
  # Visit the page on tablet and desktop without any user interaction
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
    label: Visit the page on tablet and desktop without any user interaction
    viewportNames:
      - tablet
      - desktop

  # The page under test in below test case should have dark theme
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
    label: Click theme toggle on tablet and desktop
    viewportNames:
      - tablet
      - desktop
    actions:
      - click: '#theme-toggle'

  # The page under test in below test case should have light theme
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
   label: Click theme toggle a second time on tablet and desktop
    viewportNames:
      - tablet
      - desktop
    actions:
      - click: '#theme-toggle'
      - click: '#theme-toggle'

  # Visit the page on mobile without any user interaction
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
    label: Visit the page on mobile without any user interaction
    viewportNames:
      - phone

  # The page under test in below scenario should have dark theme
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
    label: Click theme toggle on mobile
    viewportNames:
      - phone
    actions:
      - click: '#menu-btn'
      - click: '#theme-toggle'

  # The page under test in below scenario should have light theme
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
   label: Click theme toggle a second time on mobile
    viewportNames:
      - phone
    actions:
      - click: '#menu-btn'
      - click: '#theme-toggle'
      - click: '#theme-toggle'

Verify

Execute the following command to verify the test suite:

regressify ref --test-suite theme-toggle
regressify approve --test-suite theme-toggle
regressify test --test-suite theme-toggle

Further Experimentation

Try removing the viewportNames property from some of the scenarios and compare how the results change.

Advanced use cases

The phone, tablet, and desktop labels used in the test suite are defined in the common/_viewports.yaml file. You can adjust their names, dimensions, and inclusion rules to match the project.

If a scenario needs a viewport that is not predefined there, you can test it with the viewports property, as shown below:

scenarios:
  - url: https://tuyen.blog/optimizely-cms/testing/viewports-test-sample/
    viewports:
      - label: My special device # Use any name you find meaningful
        width: 1366
        height: 768

      - label: My other special device
        width: 600
        height: 1200