browsers.yml

name: Browsers

on:
  pull_request:
    paths:
      - 'src/**'
      - 'package-lock.json'
      - '.browserslistrc'
      - '.babelrc'
      - 'webpack.config.*'
      - 'public/index.html'
      - '.github/actions-scripts/__snapshots__/**'
      - '.github/workflows/browsers.yml'

jobs:
  selenium:
    strategy:
      fail-fast: false
      matrix:
        os: [windows-latest, macos-latest]
        browser: [edge, firefox, safari, chrome]
        exclude:
          - os: windows-latest
            browser: safari
          - os: macos-latest
            browser: edge
          - os: macos-latest
            browser: chrome
          # Safari workaround is not working in Catalina
          - browser: safari

    runs-on: ${{ matrix.os }}
    steps:
      - name: Dump GitHub context
        env:
          GITHUB_CONTEXT: ${{ toJson(github) }}
        run: echo "$GITHUB_CONTEXT"

      - uses: actions/checkout@v2
        with:
          fetch-depth: 1
      - uses: actions/setup-node@v2
        with:
          node-version: 18.x

      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.OS }}-build-${{ matrix.browser }}
          restore-keys: |
            ${{ runner.OS }}-build-${{ env.cache-name }}-
            ${{ runner.OS }}-build-
            ${{ runner.OS }}-

      - run: |
          npm ci
          npm run build
        env:
          CYPRESS_INSTALL_BINARY: 0
          HUSKY_SKIP_INSTALL: true

      # install drivers
      - name: Enable Safari Driver
        run: |
          # Workaround for `sudo safardriver --enable` not working:
          # https://github.com/web-platform-tests/wpt/issues/19845
          # https://github.com/web-platform-tests/wpt/blob/master/tools/ci/azure/install_safari.yml
          mkdir -p ~/Library/WebDriver/
          curl https://raw.githubusercontent.com/web-platform-tests/wpt/master/tools/ci/azure/com.apple.Safari.plist -o ~/Library/WebDriver/com.apple.Safari.plist
          defaults write com.apple.Safari WebKitJavaScriptCanOpenWindowsAutomatically 1
          # sudo safaridriver --enable
        if: matrix.browser == 'safari'

      - run: |
          brew install --cask firefox
          brew install geckodriver
        if: matrix.browser == 'firefox' && matrix.os == 'macos-latest'

      - run: echo "$env:GeckoWebDriver" >> $GITHUB_PATH
        if: matrix.browser == 'firefox' && matrix.os == 'windows-latest'

      - run: echo "$env:EdgeWebDriver" >> $GITHUB_PATH
        if: matrix.browser == 'edge' && matrix.os == 'windows-latest'

      - run: echo "$env:ChromeWebDriver" >> $GITHUB_PATH
        if: matrix.browser == 'chrome' && matrix.os == 'windows-latest'

      - run: npm i --no-optional --no-audit selenium-webdriver pixelmatch pngjs
      - run: node .github/actions-scripts/selenium.js
        env:
          BROWSER: ${{ matrix.browser }}
          PORT: 0
          NODE_ENV: production # prevent watching

      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          name: screenshot-${{ matrix.browser }}-${{ matrix.os }}
          path: screenshot

  puppeteer:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 1
      - name: Cache node modules
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.OS }}-build-puppeteer
          restore-keys: |
            ${{ runner.OS }}-build-puppeteer
      - run: |
          npm ci
          npm run build
        env:
          CYPRESS_INSTALL_BINARY: 0
          HUSKY_SKIP_INSTALL: true
      - run: npm i --no-optional --no-audit puppeteer pixelmatch pngjs
      - run: node .github/actions-scripts/puppeteer.js
        env:
          PORT: 0
          NODE_ENV: production # prevent watching

      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          name: screenshot-puppeteer-darwin
          path: screenshot