Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-54920

Behat: Allow viewport size to be set consistently

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      1. Place attached file viewport.feature in folder lib/tests/behat
      2. Run Behat init
      3. Run Behat with --tags=mdl54920
      4. When the test pauses, take a screenshot of the browser window.
      5. Use a graphics program such as Gimp to zoom right in and measure exactly the size of the browser client area, not including the vertical scrollbar.
      EXPECTED: The client area should be 800 x 600.
      6. Continue the Behat test - it should hopefully pass. (Note: The precise width in the test - 577 - might be different depending on changes to the Moodle theme so it is probably fragile across versions. 577 is correct on master as of just now... But the above measurement is the 'real' test.)

      Show
      1. Place attached file viewport.feature in folder lib/tests/behat 2. Run Behat init 3. Run Behat with --tags=mdl54920 4. When the test pauses, take a screenshot of the browser window. 5. Use a graphics program such as Gimp to zoom right in and measure exactly the size of the browser client area, not including the vertical scrollbar. EXPECTED: The client area should be 800 x 600. 6. Continue the Behat test - it should hopefully pass. (Note: The precise width in the test - 577 - might be different depending on changes to the Moodle theme so it is probably fragile across versions. 577 is correct on master as of just now... But the above measurement is the 'real' test.)
    • Affected Branches:
      MOODLE_31_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE, MOODLE_31_STABLE
    • Pull Master Branch:
      MDL-54920-master

      Description

      We are making various aspects of our custom plugins responsive. As a result I tried to write a Behat test for one specific feature about controlling the size of a particular aspect. Basically I want to do:

      • set the window to a specific size
      • check the exact width of my thing, it should be say 600
      • set the window 50 pixels wider
      • the width should now be 650
        (then change a setting to make it not responsive and repeat and check the size doesn't change)

      I wrote this test and it worked fine on my machine, but then I discovered it was fragile across operating systems/browsers. The reason is that when you set the window size, e.g. to 800x600, this achieves a slightly random result - the actual browser viewport is a different size depending on the operating system and browser used. (Even the same browser, on different OS, has different size for its surround.)

      We decided it would be useful and more reliable to be able to set the viewport size rather than the window size. I've done the code locally but thought it would be useful to contribute to the community as well, because it provides more consistent results than the existing step, so I'm going to attach it here.

      Implementation summary

      The previous/existing step is as follows:

      And I change window size to "800x600"
      

      You can also specify 'medium' etc.

      My new additional step is:

      And I change viewport size to "800x600"
      

      It works as follows, given the above example:

      • The browser window will be set so that the viewport width is 800 pixels, provided that there is a vertical scrollbar. On pages with no vertical scrollbars, it will be slightly wider.
      • The viewport height will be 600 pixels, provided that there is not a horizontal scrollbar. If there is, it will be slightly shorter.
      • If using a browser that includes scrollbars within the viewport (on top of content) rather than taking them out of it, then the viewport height should always be exactly as specified.

      The scrollbar assumptions were made as these are most common and I wanted it to be consistent i.e. I don't want it to work differently depending on whether you are looking at a 'short' page when you run the step, because the next page you go to might be a 'long' one with scrollbar.

      I have tested on Chrome. I'm going to add test steps here that will include a way to check it since obviously the step isn't used in core (yet!)

        Attachments

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Fix Release Date:
                11/Jul/16