marcusfelling / demo.playwright Goto Github PK

This repo is used to demo various testing scenarios with Playwright 🎭, using the official test-runner and scripts authored in TypeScript.

License: Apache License 2.0

TypeScript 76.02% HTML 4.54% JavaScript 3.39% CSS 16.05%

e2e-testing playwright github-actions browser-automation typescript testing

demo.playwright's Introduction

🎭 demo.playwright

This repo is used to demo various testing scenarios with Playwright 🎭, using the official test-runner and scripts authored in TypeScript.

The test.yml GitHub Action workflow is used to:

Run Playwright example tests

accessibility - runs accessibility checks against https://playwright.dev/docs/accessibility-testing

android - runs a basic test using Android's WebView.

basic - basic tests to show interactions, element selectors, assertions, upload files, read a response, mock a response, and page object model (POM).

chrome-extension - basic test that gets a handle to the background page of Chrome extension.

drag-and-drop - runs example drag-and-drop test utilizing https://www.w3schools.com/html/html5_draganddrop.asp.

fixtures - runs example tests utilizing test and worker fixtures.

github-api - uses GitHub API to test creation of a new repo, bug, and feature, then deletion of repo.

oauth - runs oauth tests for LinkedIn, Facebook, and Google, to login to https://courses.ultimateqa.com/users/sign_in.

performance - web performance tests using resource timing API, DevTools, and lighthouse, run against https://fastestwebsite.net

svgomg - End-to-end tests for SVGOMG! site, hosted at https://demo.playwright.dev/svgomg

todomvc - End-to-end tests for ToDoMVC site, hosted at https://demo.playwright.dev/todomvc

visual-comparison - visually compares snapshots with golden screenshots and text content for playwright.dev landing page.

Publish each HTML report to their respective directory

When the above tests are finished, the results are published to GitHub pages:

Configuration

The baseURL value for most tests is set via .env file that you'll find at the root of each folder. Typically this file is gitignored; by including it in this demo repo, it makes running and sharing these tests easier.

Have a testing scenario you'd like to see included?

Please open an issue with details.

demo.playwright's People

Contributors

Stargazers

Watchers

Forkers

ev1-av1-ness blackcow02 marcin3 orther iqbmo04 yust1m one-aalam gabalafou thinkafterbefore rickytoby rafikiassumani-msft ljuboja waitingfordark vsravuri mallikarjunkrs djuro-r cristianpintoqa berberich whoisbigo synjan kannansenthil mohammed394 adi-mb-ro xgurevich frashev dtinth scott-hpe omas23 valiantsin2021 jfgreffier jbabs22 lordkarlito hngocanh bradcstevens pawanuk simple-elf dbravi oleglustenko ahmed1306 samples-examples miguel-barca shashankraj123

demo.playwright's Issues

Page Object model patten

Just wondering if you have any tests showing the use of a Page Object Model pattern?

Make local run easier

This repo is great as a resource, but most tests won't run locally out of the box.

The first issue is that the base URLs are set in the Github Actions. What do you think of moving them in the test ? URLs are then hardcoded but the tests can run independently. Another solution is using one .env file defining the different base URL.

[Idea for testing scenario] drag & drop

https://twitter.com/uninen/status/1479811616699043840

Oauth example improvements

Add assertions
Re-use state

[Idea for testing scenario] fixures

https://twitter.com/MultiKiter/status/1479850102005153799

[Idea for testing scenario] Cucumber

"A sample with cucumber, and another to data driven testing to get data from csv or json files"
https://twitter.com/apis3445/status/1484875551542325249

Any examples for scenarios with p-datatable-wrapper objects

e.g. clicking on a button wrapped in the p-datatable-wrapper or selecting a list from the p-datatable-wrapper

[Idea for testing scenario] Using fixtures with multiple browser windows/tabs in single test

Hello, can you provide an example of using fixtures in situations when i want to initialize page object for multiple pages inside single test? For example i have Livechat class and i want to init livechat page object for each browser. How to achieve this with using fixtures? I understand how to do this while using a single page instance in your test like this example: https://github.com/MarcusFelling/demo.playwright/blob/main/basic/pom/pom-with-fixtures.spec.ts but not sure how to do this with multiple pages in single test.

  test('Test with multiple livechat windows', async ({ browser }) => {
    const browserWindow1 = await browser.newContext() 
    const browserWindow2 = await browser.newContext()
    const browserWindow3 = await browser.newContext()

    const page1 = await browserWindow1.newPage()
    const page2 = await browserWindow2.newPage()
    const page3 = await browserWindow3.newPage()
    
    const livechat1 = new Livechat(page1)
    const livechat2 = new Livechat(page2)
    const livechat3 = new Livechat(page3)
    
    await livechat1.startSession()
    await livechat2.startSession()
    await livechat3.startSession()
    ...
   })
})