Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions
Jump to navigation
Jump to search
Udemy Playwright: Web Automation Testing From Zero to Hero (view source)
Revision as of 00:32, 14 June 2024
, 14 June→Github Actions and Argos CI
| Line 2,114: | Line 2,114: | ||
=== Github Actions and Argos CI === | === Github Actions and Argos CI === | ||
'''GitHub Actions''' | |||
* Link to instructions [https://playwright.dev/docs/ci-intro on Playwright] | |||
* Create file <code>.github\workflows\playwright.yml</code> copy from instructions above, then some small edits | |||
<nowiki> | |||
name: Playwright Tests | |||
on: | |||
push: | |||
branches: [ main, master ] | |||
pull_request: | |||
branches: [ main, master ] | |||
jobs: | |||
test: | |||
timeout-minutes: 60 | |||
runs-on: ubuntu-latest | |||
steps: | |||
- uses: actions/checkout@v4 | |||
- uses: actions/setup-node@v4 | |||
with: | |||
node-version: 20 | |||
- name: Install dependencies | |||
run: npm ci --force | |||
- name: Install Playwright Browsers | |||
run: npx playwright install --with-deps --force | |||
- name: Run Playwright tests | |||
run: npm run pageObjects-chrome | |||
- uses: actions/upload-artifact@v4 | |||
if: ${{ !cancelled() }} | |||
with: | |||
name: playwright-report | |||
path: playwright-report/ | |||
retention-days: 30</nowiki> | |||
* update node version, add --force x2, change final run command <code>run: npm run pageObjects-chrome</code> | |||
* commit & push to [https://github.com/VincentDirks/Playwright-Udemy-Course GitHub] | |||
* see [https://github.com/VincentDirks/Playwright-Udemy-Course/actions actions tab] for progress and to see test artifacts saved | |||
'''argos CI''' | |||
* Go to [https://argos-ci.com argos-CI] to create account, best to select to continue with GitHub. (selecting Hobby - I'm working on personal projects) | |||
* Create a new project, and select the repo to integrate | |||
* Go to [https://argos-ci.com/docs/quickstart/playwright Playwright Quickstart] for instructions | |||
** install <code>npm i --save-dev @argos-ci/playwright --force</code> | |||
** Setup Argos in your Playwright config (no need to provide token value when integrating through GitHub) | |||
** Take screenshots | |||
eg. In file <code>tests\usePageObjects.spec.ts</code> | |||
<nowiki> | |||
... | |||
import { argosScreenshot } from "@argos-ci/playwright" | |||
... | |||
test.only("Testing with argos CI", async ({ page }) => { | |||
const pm = new PageManager(page) | |||
await pm.navigateTo().formLayoutsPage() | |||
await argosScreenshot(page,"form layouts page") | |||
await pm.navigateTo().datePickerPage() | |||
await argosScreenshot(page,"date picker page") | |||
})</nowiki> | |||
** commit & push to GitHub | |||
** Verify the GitHub action has been processed | |||
** Verify the reference build in argo-ci | |||
* Implement some "design changes" to the web app being tested | |||
* Create new branch, make (visual) changes, commit, push to GitHub, create PR to master | |||
* This will trigger GitHub action and argos-CI will detect the visual changes | |||
* verify the argos-CI verification step has failed on GitHub | |||
* review the visual changes in argos-CI, approve them | |||
* pull request can now be merged | |||