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 01:46, 14 June 2024

5,110 bytes added ,  14 June
m
→‎Github Actions and Argos CI
mNo edit summary
(6 intermediate revisions by the same user not shown)
Line 2,054: Line 2,054:
  <nowiki>
  <nowiki>
npx playwright test --update-snapshots</nowiki>
npx playwright test --update-snapshots</nowiki>
I would like to try doing visual testing of small parts on the screen, and then test the integration of those parts but masking the smaller parts so that the larger integration test only checks that the sub parts are there, but not test the sub part internals. The mask option of <code>.toHaveScreenshot({mask: [maskedElement1,maskedElement2]})</code> can take an array of locators. However, this would apply the same colour to all of them, might try using CSS through <code>.toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') })</code> to render the elements with a solid block with different colours.
To do this I need to identify the child elements and set their <code>visibility: hidden;</code> and then the element to have <code>background-color: #909090;</code>
<nowiki>
ngx-form-layouts > div.row:nth-child(2) > div.col-md-6:nth-child(2) > nb-card:nth-child(1) > nb-card-body {
  visibility:hidden;
}
ngx-form-layouts > div.row:nth-child(2) > div.col-md-6:nth-child(2) > nb-card:nth-child(1) {
  background-color: #909090;
}</nowiki>
for the course's test web app.
Could consider assigning colours programmatically at run time...


=== Playwright with Docker Container ===
=== Playwright with Docker Container ===
* 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/1127...1135’

Navigation menu