windows - 在 Windows 环境下的 Github Actions 中运行 cypress

Question

我想在 github 操作中运行我的 cypress 测试。应该对 firefox、chrome 和 edge 进行测试。 Cypress 支持所有这些:https://github.com/cypress-io/github-action#browser
虽然 Firefox 和 chrome 运行良好，但边缘设置并不是那么完美。这是因为边缘浏览器在 github 操作中的 Windows 系统上运行。
这是构建 next.js 应用程序的 yml 文件，然后使用边缘浏览器对其进行测试:

build:
  runs-on: ubuntu-latest
  steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - uses: actions/setup-node@v2-beta
      with:
        node-version: "12"

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache node_modules
      id: yarn-cache
      uses: actions/cache@v2
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

    - name: Install Dependencies
      run: yarn

    - name: Build
      run: yarn build

    - name: Upload next build
      uses: actions/upload-artifact@v2
      with:
        name: dist
        path: .next

e2e-test-edge:
  needs: build
  runs-on: windows-latest
  strategy:
    matrix:
      node: [12]

  steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Download next build from previous step
      uses: actions/download-artifact@v2
      with:
        name: dist
        path: .next

    - name: Cache Cypress binary
      uses: actions/cache@v2
      with:
        path: ~/.cache/Cypress
        key: cypress-${{ runner.os }}-cypress-${{ github.ref }}-${{ hashFiles('**/package.json') }}

    - name: Get yarn cache directory path
      id: yarn-cache-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"

    - name: Cache node_modules
      id: yarn-cache
      uses: actions/cache@v2
      with:
        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

    - name: Install Dependencies
      run: yarn install --frozen-lockfile

    - name: Verify Cypress
      env:
        # make sure every Cypress install prints minimal information
        CI: 1
      # print Cypress and OS info
      run: |
        npx cypress verify
        npx cypress info
        npx cypress version
        npx cypress version --component package
        npx cypress version --component binary
        npx cypress version --component electron
        npx cypress version --component node

    - name: Cypress edge browser tests
      uses: cypress-io/github-action@v2
      with:
        browser: edge
        start: yarn start

    - uses: actions/upload-artifact@v2
      if: failure()
      with:
        name: edge-cypress-screenshots
        path: cypress/screenshots
    # Test run video was always captured, so this action uses "always()" condition
    - uses: actions/upload-artifact@v2
      if: always()
      with:
        name: edge-cypress-videos
        path: cypress/videos

因此，如果此管道在 github 操作中运行，则一切正常。缓存部分被跳过，因为这是第一次构建，所以没有缓存键匹配。 Deps 安装也没有错误，还有 Cypress verify部分对我来说很好:

Run npx cypress verify
  npx cypress verify
  npx cypress info
  npx cypress version
  npx cypress version --component package
  npx cypress version --component binary
  npx cypress version --component electron
  npx cypress version --component node
  shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
  env:
    CI: 1

25l[10:09:46]  Verifying Cypress can run C:\Users\runneradmin\AppData\Local\Cypress\Cache\6.0.0\Cypress [started]
[10:09:49]  Verifying Cypress can run C:\Users\runneradmin\AppData\Local\Cypress\Cache\6.0.0\Cypress [completed]
25h25h
Displaying Cypress info...

Detected 3 browsers installed:

1. Chrome
  - Name: chrome
  - Channel: stable
  - Version: 86.0.4240.198
  - Executable: C:\Program Files\Google\Chrome\Application\chrome.exe

2. Edge
  - Name: edge
  - Channel: stable
  - Version: 87.0.664.47
  - Executable: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

3. Firefox
  - Name: firefox
  - Channel: stable
  - Version: 82.0.3.7617
  - Executable: C:\Program Files\Mozilla Firefox\firefox.exe

Note: to run these browsers, pass <name>:<channel> to the '--browser' field

Examples:
- cypress run --browser chrome
- cypress run --browser firefox

Learn More: https://on.cypress.io/launching-browsers

Proxy Settings: none detected
Environment Variables: none detected

Application Data: C:\Users\runneradmin\AppData\Roaming\cypress\cy\development
Browser Profiles: C:\Users\runneradmin\AppData\Roaming\cypress\cy\development\browsers
Binary Caches: C:\Users\runneradmin\AppData\Local\Cypress\Cache

Cypress Version: 6.0.0
System Platform: win32 (10.0.17763)
System Memory: 7.52 GB free 4.02 GB
Cypress package version: 6.0.0
Cypress binary version: 6.0.0
Electron version: 11.0.2
Bundled Node version:
12.18.3
6.0.0
6.0.0
11.0.2

12.18.3

但随后 Cypress edge browser tests部分到达并发生以下错误:

Run cypress-io/github-action@v2
  with:
    browser: edge
    start: yarn start
    record: false
    config-file: cypress.json
C:\windows\system32\cmd.exe /D /S /C "C:\npm\prefix\yarn.cmd --frozen-lockfile"
yarn install v1.22.10
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.08s.
C:\windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npx.cmd" cypress cache list"
No cached binary versions were found.
C:\windows\system32\cmd.exe /D /S /C ""C:\Program Files\nodejs\npx.cmd" cypress verify"
The cypress npm package is installed, but the Cypress binary is missing.

We expected the binary to be installed here: C:\Users\runneradmin\.cache\Cypress\6.0.0\Cypress\Cypress.exe

Reasons it may be missing:

- You're caching 'node_modules' but are not caching this path: C:\Users\runneradmin\AppData\Local\Cypress\Cache
- You ran 'npm install' at an earlier build step but did not persist: C:\Users\runneradmin\AppData\Local\Cypress\Cache

Properly caching the binary will fix this error and avoid downloading and unzipping Cypress.

Alternatively, you can run 'cypress install' to download the binary again.

https://on.cypress.io/not-installed-ci-error

----------

Platform: win32 (10.0.17763)
Cypress Version: 6.0.0
Error: The process 'C:\Program Files\nodejs\npx.cmd' failed with exit code 1

我尝试了错误消息所说的所有内容:

执行 cypress install就在故障部分之前

将缓存目录更改为绝对路径 C:\Users\runneradmin\.cache\Cypress

我也没有找到cypress和windows结合的github Action yml的例子。也许我太愚蠢了，无法理解 Windows 机器。

Answer 1

You're caching 'node_modules' but are not caching this path: C:\Users\runneradmin\AppData\Local\Cypress\Cache

即使我没有使用 actions/cache，我也遇到了同样的错误缓存 npm 模块。我试过 actions/cache并且仍然遇到相同的错误。
我通过做两件事来解决这个问题:
1- 在 actions/cache 中指定 Cypress 二进制缓存路径
2- 设置 CYPRESS_CACHE_FOLDER在 cypress-io/github-action

cypress-run-windows:
    runs-on: windows-latest
    needs: cypress-run-ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12'

      - name: Npm cache
        uses: actions/cache@v2
        id: cache-windows
        with:
          path: |
            C:\Users\runneradmin\AppData\npm-cache
            C:\Users\runneradmin\AppData\Local\Cypress\Cache <-----
          key: ${{ runner.os }}-node-windows-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-windows-

      - name: Npm install
        if: steps.cache-windows.outputs.cache-hit != 'true'
        run: npm install

      - name: Cypress run on Chrome
        uses: cypress-io/github-action@v2
        with:
          start: npm start
          wait-on: http://localhost:4200
          browser: chrome
          install: false
        env:
          CYPRESS_CACHE_FOLDER: C:\Users\runneradmin\AppData\Local\Cypress\Cache <-----