Taking screenshots in Electron and Chrome

.github/workflows/example-basic.yml

@@ -16,23 +16,6 @@ jobs:
         with:
           working-directory: examples/basic
 
-      # store screenshot captured during the test
-      - uses: actions/upload-artifact@v1
-        with:
-          name: screenshots-in-electron
-          path: examples/basic/cypress/screenshots
-
-      - name: Chrome
-        uses: ./
-        with:
-          working-directory: examples/basic
-          browser: chrome
-
-      - uses: actions/upload-artifact@v1
-        with:
-          name: screenshots-in-chrome
-          path: examples/basic/cypress/screenshots
-
   basic-on-windows:
     runs-on: windows-latest
     steps:

.github/workflows/example-chrome.yml

@@ -0,0 +1,51 @@
+name: example-chrome
+on: [push]
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Electron
+        uses: ./
+        with:
+          working-directory: examples/chrome
+
+      # store screenshot captured during the test
+      - uses: actions/upload-artifact@v1
+        with:
+          name: screenshots-in-electron
+          path: examples/chrome/cypress/screenshots
+
+      - run: npx image-size cypress/screenshots/**/*.png
+        working-directory: examples/chrome
+
+      - name: Chrome
+        uses: ./
+        with:
+          working-directory: examples/chrome
+          browser: chrome
+
+      - uses: actions/upload-artifact@v1
+        with:
+          name: screenshots-in-chrome
+          path: examples/chrome/cypress/screenshots
+
+      - run: npx image-size cypress/screenshots/**/*.png
+        working-directory: examples/chrome
+
+      - name: Chrome headless
+        uses: ./
+        with:
+          working-directory: examples/chrome
+          browser: chrome
+          headless: true
+
+      - uses: actions/upload-artifact@v1
+        with:
+          name: screenshots-in-headless-chrome
+          path: examples/chrome/cypress/screenshots
+
+      - run: npx image-size cypress/screenshots/**/*.png
+        working-directory: examples/chrome

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 cypress/videos/
-examples/env/cypress/videos/
+examples/*/cypress/videos
+examples/*/cypress/screenshots

README.md

@@ -48,6 +48,8 @@ jobs:
           browser: chrome
 ```
 
+[![Chrome example](https://github.com/cypress-io/github-action/workflows/example-chrome/badge.svg?branch=master)](.github/workflows/example-chrome.yml)
+
 ### Headless
 
 Run the browser in headless mode

examples/basic/cypress/integration/spec.js

@@ -1,5 +1,4 @@
 it('works', () => {
   expect(42).to.equal(21 + 21)
   cy.visit('https://example.cypress.io')
-  cy.screenshot('example', { capture: 'runner' })
 })

examples/chrome/cypress.json

@@ -0,0 +1,4 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false
+}

examples/chrome/cypress/integration/spec.js

@@ -0,0 +1,12 @@
+it('works', () => {
+  expect(42).to.equal(21 + 21)
+  cy.visit('https://example.cypress.io')
+  // runner includes the application in the viewport
+  // and the reporter showing the command log
+  cy.screenshot('runner', { capture: 'runner' })
+  // just the visible portion of the viewport
+  cy.screenshot('viewport', { capture: 'viewport' })
+  // you can take the screenshot of the entire page
+  // which will be stitched into one tall image
+  cy.screenshot('fullPage', { capture: 'fullPage' })
+})

examples/chrome/cypress/plugins/index.js

@@ -0,0 +1,16 @@
+const os = require('os')
+module.exports = on => {
+  on('before:browser:launch', (browser, launchOptions) => {
+    console.log('before launching browser')
+    console.log(browser)
+
+    if (browser.name === 'chrome') {
+      // https://www.ghacks.net/2013/10/06/list-useful-google-chrome-command-line-switches/
+      launchOptions.args.push('--window-size=1280,1024')
+
+      console.log('chrome launch args:')
+      console.log(launchOptions.args.join(os.EOL))
+      return launchOptions
+    }
+  })
+}