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 22:59, 16 June 2024

3,957 bytes added ,  16 June
m
no edit summary
mNo edit summary
 
(4 intermediate revisions by the same user not shown)
Line 6: Line 6:


* My GitHub Playwright Udemy Course [https://github.com/VincentDirks/Playwright-Udemy-Course my repo #1] & [https://github.com/VincentDirks/Playwright-Udemy-Course-2 my repo #2]
* My GitHub Playwright Udemy Course [https://github.com/VincentDirks/Playwright-Udemy-Course my repo #1] & [https://github.com/VincentDirks/Playwright-Udemy-Course-2 my repo #2]
* Started implementing a [https://github.com/VincentDirks/Playwright-my-cvwiki suite for this CV Wiki]


Note: This page is now massive, but it's handy to have it all in one place so that I can use ctrl-f to find notes... I'll be using this page as my cheatsheet for Playwright
Note: This page is now massive, but it's handy to have it all in one place so that I can use ctrl-f to find notes... I'll be using this page as my cheatsheet for Playwright
Line 2,071: Line 2,073:
=== Playwright with Docker Container ===
=== Playwright with Docker Container ===
* Make sure [https://www.docker.com/products/docker-desktop/ Docker Desktop] is installed  
* Make sure [https://www.docker.com/products/docker-desktop/ Docker Desktop] is installed  
*
 
 
<code>docker</code> file allows you to build a docker image
<nowiki>
FROM mcr.microsoft.com/playwright:v1.44.1-jammy
 
RUN mkdir /app
WORKDIR /app
COPY . /app/
 
RUN npm install --force
RUN npx playwright install</nowiki>
Commands
<nowiki>
docker build -t pw-pageobject-test .
docker images
docker run -it pw-pageobject-test</nowiki>
The last command starts the container and you can execute commands such as
<nowiki>
npm run pageObjects-chrome</nowiki>
 
 
<code>compose.yaml</code> file allows you to build and execute an image as well as obtain files/folder from a running instance
<nowiki>
services:
  playwright-test:
    image: playwright-test
    build:
      context: .
      dockerfile: ./dockerfile
    command: npm run pageObjects-chrome
    volumes:
      - ./playwright-report/:/app/playwright-report
      - ./test-results/:/app/test-results</nowiki>
 
Commands
<nowiki>
docker-compose up --build
docker-compose up</nowiki>
 
Will run (& build) the image in the container, execute the command, and at the end copy the generated files back to the host computer.


=== 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
Note: checked the documentation for argos-CI and you can also mask and apply CSS prior to taking the screenshot.
Retrieved from ‘https://dirksonline.net/cvwiki/index.php/Special:MobileDiff/1131...1138’

Navigation menu