Show how to increase the browser window size (#657)

Author: bahmutov

README.md

@@ -22,6 +22,7 @@ Recipe | Description
 [Out-of-the-box TypeScript](./examples/fundamentals__typescript) | Write tests in TypeScript without setting up preprocessors
 [Per-test timeout](./examples/fundamentals__timeout) | Fail a test if it runs longer than the specified time limit
 [Cypress events](./examples/fundamentals__cy-events) | Using `Cypress.on` and `cy.on` to listen to [Cypress events](https://on.cypress.io/catalog-of-events) like `before:window:load`
+[Video resolution](./examples/fundamentals__window-size) | Increase the browser window size to record high quality videos and capture detailed screenshots
 
 ## Testing the DOM
 

circle.yml

@@ -211,6 +211,8 @@ jobs:
     <<: *defaults
   file-upload-react:
     <<: *defaults
+  fundamentals__window-size:
+    <<: *defaults
   fundamentals__node-modules:
     <<: *defaults
   fundamentals__fixtures:
@@ -427,6 +429,10 @@ all_jobs: &all_jobs
   - file-upload-react:
       requires:
         - build
+  - fundamentals__window-size:
+      requires:
+        - build
+      test-command: npm run test:ci:record -- --group $CIRCLE_JOB
   - fundamentals__node-modules:
       requires:
         - build
@@ -442,6 +448,25 @@ all_jobs: &all_jobs
   - fundamentals__cy-events:
       requires:
         - build
+  - fundamentals__dynamic-tests:
+      requires:
+        - build
+  - fundamentals__fixtures:
+      requires:
+        - build
+  - fundamentals__timeout:
+      requires:
+        - build
+  - fundamentals__module-api:
+      requires:
+        - build
+  - fundamentals__module-api-wrap:
+      requires:
+        - build
+      test-command: npm run test:ci
+  - fundamentals__typescript:
+      requires:
+        - build
   - logging-in__basic-auth:
       requires:
         - build
@@ -577,25 +602,6 @@ all_jobs: &all_jobs
   - server-communication__server-timing:
       requires:
         - build
-  - fundamentals__dynamic-tests:
-      requires:
-        - build
-  - fundamentals__fixtures:
-      requires:
-        - build
-  - fundamentals__timeout:
-      requires:
-        - build
-  - fundamentals__module-api:
-      requires:
-        - build
-  - fundamentals__module-api-wrap:
-      requires:
-        - build
-      test-command: npm run test:ci
-  - fundamentals__typescript:
-      requires:
-        - build
 
   # to avoid constantly tweaking required jobs on CircleCI
   # we can have a single job wait on all other test jobs here.
@@ -622,6 +628,7 @@ all_jobs: &all_jobs
         - blogs__form-submit
         - extending-cypress__chai-assertions
         - file-upload-react
+        - fundamentals__window-size
         - fundamentals__node-modules
         - fundamentals__fixtures
         - fundamentals__timeout

examples/fundamentals__window-size/200px.png

@@ -0,0 +1,9 @@
+# Browser window size vs Application viewport
+
+![Showing the window dimensions](images/page.png)
+
+The browser window, the command log, and the application's iframe sizes are printed.
+
+The [plugin file](./cypress/plugins/index.js) increases the browser window size when running in the headless mode to produce high quality video. See [launch api](https://on.cypress.io/browser-launch-api) for more documentation.
+
+**Note:** increasing the browser window size seems to not work very well in Electron browser

examples/fundamentals__window-size/README.md

@@ -0,0 +1,5 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false,
+  "viewportWidth": 2000
+}

examples/fundamentals__window-size/cypress.json

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+/* eslint-env browser */
+describe('window size', () => {
+  it('shows the page clearly', () => {
+    // let's get the total opened browser dimensions
+    const windowWidth = window.top.innerWidth
+    const windowHeight = window.top.innerHeight
+
+    cy.log(`browser window is: **${windowWidth} x ${windowHeight}**`)
+    cy.task('log', { message: 'browser window', o: { windowWidth, windowHeight } }, { log: false })
+
+    // part of the browser window is taken up the command log
+    const commandLog = window.top.document.querySelector('.reporter-wrap')
+    const commandLogWidth = commandLog.offsetWidth
+    const commandLogHeight = commandLog.offsetHeight
+
+    cy.log(`command log is: **${commandLogWidth} x ${commandLogHeight}**`)
+    cy.task('log', { message: 'command log', o: { commandLogWidth, commandLogHeight } }, { log: false })
+
+    // the app thinks it has the following dimensions
+    cy.window({ log: false }).then((win) => {
+      // the application is scaled to fit into its iframe
+      // and the iframe's dimensions are
+      const iframe = cy.state('$autIframe')
+      const iframeWidth = Math.round(iframe.width())
+      const iframeHeight = Math.round(iframe.height())
+
+      cy.log(`app iframe real size is: **${iframeWidth} x ${iframeHeight}**`)
+      cy.task('log', { message: 'app iframe real size', o: { iframeWidth, iframeHeight } }, { log: false })
+
+      // the application thinks it has the window of the follow size
+      // which is the "viewport" numbers
+      const viewportWidth = win.innerWidth
+      const viewportHeight = win.innerHeight
+
+      cy.log(`app viewport is: **${viewportWidth} x ${viewportHeight}**`)
+      cy.task('log', { message: 'app viewport', o: { viewportWidth, viewportHeight } }, { log: false })
+    })
+
+    cy.visit('index.html')
+    cy.screenshot('page', { capture: 'runner' })
+  })
+})

examples/fundamentals__window-size/cypress/integration/spec.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+module.exports = function (on, config) {
+  // configure plugins here
+  on('task', {
+    log ({ message, o }) {
+      console.log(message)
+      if (o) {
+        console.log(JSON.stringify(o, null, 2))
+      }
+
+      return null
+    },
+  })
+
+  // let's increase the browser window size when running headlessly
+  // this will produce higher resolution images and videos
+  // https://on.cypress.io/browser-launch-api
+  on('before:browser:launch', (browser = {}, launchOptions) => {
+    console.log('launching browser %s is headless? %s', browser.name, browser.isHeadless)
+
+    // the browser width and height we want to get
+    // our screenshots and videos will be of that resolution
+    const width = 1920
+    const height = 1080
+
+    console.log('setting the browser window size to %d x %d', width, height)
+
+    if (browser.name === 'chrome' && browser.isHeadless) {
+      launchOptions.args.push(`--window-size=${width},${height}`)
+
+      // force screen to be non-retina and just use our given resolution
+      launchOptions.args.push('--force-device-scale-factor=1')
+    }
+
+    if (browser.name === 'electron' && browser.isHeadless) {
+      // might not work on CI for some reason
+      launchOptions.preferences.width = width
+      launchOptions.preferences.height = height
+    }
+
+    if (browser.name === 'firefox' && browser.isHeadless) {
+      launchOptions.args.push(`--width=${width}`)
+      launchOptions.args.push(`--height=${height}`)
+    }
+
+    return launchOptions
+  })
+}

examples/fundamentals__window-size/cypress/plugins/index.js

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <style>
+      * {
+        margin: 0
+      }
+      body {
+        background: url('200px.png');
+      }
+    </style>
+  </head>
+  <body>
+  </body>
+</html>

examples/fundamentals__window-size/images/page.png

@@ -0,0 +1,12 @@
+{
+  "name": "window-size",
+  "version": "1.0.0",
+  "description": "How to control the browser window size",
+  "private": true,
+  "scripts": {
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "test:ci": "../../node_modules/.bin/cypress run --headless --browser chrome",
+    "test:ci:record": "../../node_modules/.bin/cypress run --record --headless --browser chrome"
+  }
+}