
我目前任職流量不小的 B2C 電子商務公司,為避免不小心將結帳畫面改壞了,而沒被發現,而我著手研究 UI TEST,用於保護我們的結帳流程,之前就有用 playwright 來做 SEO 的預渲染,在評估了幾套 UI 測試後,發現 playwright 這幾年生態變得很完整及簡單,非常適合我們,其優點如下
npm init [email protected]
name: Playwright Tests on: repository_dispatch: types: remote-trigger-ui-test push: branches: [ main, master ] pull_request: branches: [ main, master ] jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/[email protected] - uses: actions/[email protected] with: node-version: 16 - name: Install dependencies run: npm ci - name: Install Playwright Browsers run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - uses: actions/[email protected] if: always() with: name: playwright-report path: playwright-report/ retention-days: 30 success_notify: needs: test name: notify runs-on: ubuntu-18.04 steps: - name: 📣 Send teams notification uses: simbo/[email protected] with: webhook: ${{ secrets.MSTEAMS_WEBHOOK }} title: 😊 UI - Test Success message: <p>UI - Test Success<strong>\ ^ ^ /</strong></p> color: 007FFF buttons: | See Test Report! ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} error_notify: needs: test name: error_notify if: ${{ always() && needs.test.result == 'failure' }} runs-on: ubuntu-18.04 steps: - name: Send fail notification uses: simbo/[email protected] with: webhook: ${{ secrets.MSTEAMS_WEBHOOK }} title: 💩UI - Test Fail message: <p>Ba Be Q ...<strong>= =...</strong></p> color: FF0000 buttons: | See Test Report! ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
:owner/:repo => markku636/first-ui-teset
:token => Github token 點我申請
on: push jobs: test-curl-action: name: "Call Test CICD" runs-on: ubuntu-latest steps: - name: "Call Github API" uses: indiesdev/[email protected] id: api2 with: url: https://api.github.com/repos/:owner/:repo/dispatches method: "POST" accept: 200,201,204 headers: '{ "authorization": "token :token", "accept": "application/vnd.github.everest-preview+json","content-type":"application/x-www-form-urlencoded" }' # you can use multiline format to construct json data object, the content should be yml format. # this format apply to inputs: body, headers and params "body": '{ "event_type": "remote-trigger-ui-test" }' log-response: true - name: "Use response" run: echo ${{ steps.api.outputs.response }}
超酷的,什麼環境也沒特別配置,居然能夠跳出瀏覽器錄製,真的是太好用了
npx playwright codegen www.ibuypower.com --output ./tests/ibuypower.spec.ts
使用 playwright 最大的好處,微軟挾著完整的生態,把整個工作流程都整合起來,我僅用很短的時間,就能將 vscode + github + teams 整合完成,爽度超級高。
如果無法在 vscode 中使用 jest 偵錯測試檔,請執行以下指令
npm install -D jest jest-playwright-preset playwright