{"id":18837253,"url":"https://github.com/clarenceb/playwright-basic-demo","last_synced_at":"2026-05-07T18:33:30.948Z","repository":{"id":222226417,"uuid":"755752364","full_name":"clarenceb/playwright-basic-demo","owner":"clarenceb","description":"Playwright basic demo with GitHub Actions and Microsoft Playwright Testing","archived":false,"fork":false,"pushed_at":"2024-03-28T03:57:48.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-30T08:40:35.102Z","etag":null,"topics":["azure","playwright","playwright-testing","test-automation","testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clarenceb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-10T23:51:55.000Z","updated_at":"2024-02-13T02:07:21.000Z","dependencies_parsed_at":"2024-11-08T02:48:46.555Z","dependency_job_id":null,"html_url":"https://github.com/clarenceb/playwright-basic-demo","commit_stats":null,"previous_names":["clarenceb/playwright-basic-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarenceb%2Fplaywright-basic-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarenceb%2Fplaywright-basic-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarenceb%2Fplaywright-basic-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarenceb%2Fplaywright-basic-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clarenceb","download_url":"https://codeload.github.com/clarenceb/playwright-basic-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239774324,"owners_count":19694700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","playwright","playwright-testing","test-automation","testing"],"created_at":"2024-11-08T02:34:33.610Z","updated_at":"2026-01-28T01:30:15.226Z","avatar_url":"https://github.com/clarenceb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playwright Basic Demo\n\nA basic demo of Playwright Framework and Microsoft Playwright Testing.\n\n## Setup/Prerequisites - Playwright Framework\n\nInstall dependencies for Playwright Framework on your local machine:\n\n```sh\nnpm install -D @playwright/test\nnpx playwright install\nnpx playwright install-deps\n```\n\nFirst time setup of a new project (not needed for this project as it has already been setup):\n\n```sh\nmkdir playwright-basic-demo\ncd playwright-basic-demo\nnpm init playwright@latest\n\ncp basic-demo/tests-examples/demo-todo-app.spec.ts tests\n```\n\nAfter cloning this project from GitHub, install the npm packages:\n\n```sh\nnpm install\n```\n\n### Setup/Prerequisites - Playwright Testing Service\n\n* Setup a Playwright Testing workspace\n\n  * See: [Quickstart: Run end-to-end tests at scale with Microsoft Playwright Testing Preview](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests)\n\n* Create a `.env` file in the root of the project\n\n  * See: [Set up your environment](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#set-up-your-environment)\n\n* Create a `playwright.config.ts` file in the root of the project\n\n  * See: [Add a service configuration file](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#add-a-service-configuration-file)\n\n## Demo Script\n\n### Quick walkthrough of the Playwright Framework docs\n\n* [Playwright Docs - Getting Started / Installation](https://playwright.dev/docs/intro)\n\n### Running tests locally\n\nExamine the playwright config file: `basic-demo\\playwright.config.ts`\n\nExamine a basic test file: `basic-demo\\tests\\example.spec.ts`\n\nRun tests:\n\n```sh\n# Run specific test file with 3 workers, using all profiles (chromium, firefox, webkit)\nnpx playwright test example.spec.ts --workers=3\n\nnpx playwright show-report\n```\n\nExamine a more detailed test file: `demo-todo-app.spec.ts`\n\nRun tests:\n\n```sh\n# Run specific test file with 5 workers, using the chromium profile\nnpx playwright test demo-todo-app.spec.ts --workers=5 --project=chromium\n\n# Run specific test file with 1 worker, using the chromium profile and headed mode\nnpx playwright test demo-todo-app.spec.ts:72 --workers=1 --project=chromium --headed\n\nnpx playwright show-report\n```\n\nRun API tests:\n\n```powershell\n$env:GITHUB_USER=\"your_githubuser\"\n# Create a PAT token with repo and issues read/write permissions\n$env:API_TOKEN=\"github_pat_xxxxxxxxxxxxxxxxxxxxxxxxxx\"\n\n# Uncomment the setup ad/or teardown functions as required (e.g. to create thr github repo and delete it after the tests are run)\nnpx playwright test github-api.spec.ts --workers=1\n```\n\n### Interactive Mode\n\n```sh\nnpx playwright test demo-todo-app.spec.ts --project=webkit --ui\n```\n\n* Run the tests\n* Examine the timeline\n* Examine the test the test cases and individual steps\n* Use the **Locator** to find selectors\n* Use watch mode on a single test\n* Create a failing test and debug it\n\n### Run tests using the Playwright Testing service\n\nNavigate to Playwright Testing in the Azure Portal:\n\n* Open the Playwright Testing workspace - [https://playwright.microsoft.com/](https://playwright.microsoft.com/)\n* Quick walkthrough of the workspace and configuring the access token and playwright.config.ts\n\nRun parallel tests across multiple remote browsers:\n\n```sh\n# Run specific test file with 50 workers, all profiles,\n# using the Playwright service configuration\nnpx playwright test demo-todo-app.spec.ts --workers=50 --config=playwright.service.config.ts\n\n# ==\u003e Running 72 tests using 50 workers\n```\n\n### Interactive Mode (using Playwright Inspector)\n\n```sh\nnpx playwright test demo-todo-app.spec.ts --project=chromium --ui\n```\n\n* Run the tests\n* Examine the timeline\n* Examine the test cases and individual steps\n* Use the Locator to find selectors\n* Use watch mode on a single test\n* Create a failing test and debug/fix it\n\n### VSCode Integration / GitHub Copilot\n\nTest Explorer:\n\n* Show Test Explorer (click \"Testing\" icon in the Activity Bar or select \"View\" / \"Testing\" from the menu)\n* Click \"Show Browser\"\n* Run the \"demo-todo-app.spec.ts\" test file from Test Explorer\n* Show Trace Viewer (from WSL2, change browser URL address from `0.0.0.0` to `localhost`)\n  * Make a test fail, suggest using Counter or Item Marked Completed\n  * Show in the tracer viewer: Action / Before / After\n* Pick Locator\n\nRecord a new test and use Copilot to help write the test:\n\n* Browse to `https://demo.playwright.dev/todomvc/#/`\n* Click \"What needs to be done?\"\n* Type \"Buy milk\" and press Enter\n* Click \"Assert text\" from the testing toolbar\n* Select the item count label\n* Enter \"1 item\" and click the check mark to accept\n* Click \"What needs to be done?\"\n* Type \"Buy bread\" and press Enter\n* Click \"Assert text\" from the testing toolbar\n* Select the item count label\n* Enter \"2 items\" and click the check mark to accept\n* End the test recording by clicking the record circle\n\nYou should get code similar to the following:\n\n```ts\nimport { test, expect } from '@playwright/test';\n\ntest('test', async ({ page }) =\u003e {\n  await page.goto('https://demo.playwright.dev/todomvc/#/');\n  await page.getByPlaceholder('What needs to be done?').click();\n  await page.getByPlaceholder('What needs to be done?').fill('Buy milk');\n  await page.getByPlaceholder('What needs to be done?').press('Enter');\n  await expect(page.locator('body')).toContainText('1 item');\n  await page.getByPlaceholder('What needs to be done?').click();\n  await page.getByPlaceholder('What needs to be done?').fill('Buy bread');\n  await page.getByPlaceholder('What needs to be done?').press('Enter');\n  await expect(page.locator('body')).toContainText('2 items');\n});\n```\n\nSelect the code and choose Copilot / Start Inline Chat:\n\n  \"refactor to reduce repetition\"\n\n```ts\nimport { test, expect } from '@playwright/test';\n\ntest('test', async ({ page }) =\u003e {\n  const inputField = page.getByPlaceholder('What needs to be done?');\n\n  await page.goto('https://demo.playwright.dev/todomvc/#/');\n\n  await inputField.click();\n  await inputField.fill('Buy milk');\n  await inputField.press('Enter');\n  await expect(page.getByTestId('todo-count')).toContainText('1 item');\n  await inputField.click();\n  await inputField.fill('Buy bread');\n  await inputField.press('Enter');\n  await expect(page.getByTestId('todo-count')).toContainText('2 items');\n});\n\n```\n\nSelect the inner test the code, start a Copilot inline chat:\n\n  \"Add a Page Object Model to represent this page.\"\n\n```ts\nimport { test, expect, Page } from '@playwright/test';\n\nclass TodoPage {\n  private page: Page;\n\n  constructor(page: Page) {\n    this.page = page;\n  }\n\n  async addTodoItem(item: string) {\n    const inputField = await this.page.getByPlaceholder('What needs to be done?');\n    await inputField.click();\n    await inputField.fill(item);\n    await inputField.press('Enter');\n  }\n\n  async getTodoItemCount() {\n    const todoCount = await this.page.getByTestId('todo-count');\n    return await todoCount.textContent();\n  }\n\n  async navigateTo() {\n    await this.page.goto('https://demo.playwright.dev/todomvc/#/');\n  }\n}\n\ntest('test', async ({ page }) =\u003e {\n  const todoPage = new TodoPage(page);\n\n  await todoPage.navigateTo();\n\n  await todoPage.addTodoItem('Buy milk');\n  await expect(await todoPage.getTodoItemCount()).toContain('1 item');\n\n  await todoPage.addTodoItem('Buy bread');\n  await expect(await todoPage.getTodoItemCount()).toContain('2 items');\n});\n```\n\nSelect all the code in the file:\n\n  \"Refactor getTodoCount to take an integer which is the todo count.  Assert the todo count matches the passed in value.\"\n\n```ts\nimport { test, expect } from '@playwright/test';\n\nclass TodoPage {\n  private page: any;\n\n  constructor(page: any) {\n    this.page = page;\n  }\n\n  async navigateTo() {\n    await this.page.goto('https://demo.playwright.dev/todomvc/#/');\n  }\n\n  async addTodoItem(item: string) {\n    const inputField = await this.page.getByPlaceholder('What needs to be done?');\n    await inputField.click();\n    await inputField.fill(item);\n    await inputField.press('Enter');\n  }\n\n  async markAllAsComplete() {\n    await this.page.getByText('Mark all as complete').click();\n  }\n\n  async assertTodoItemCount(count: number) {\n    const bodyLocator = await this.page.getByTestId('todo-count');\n    const bodyText = await bodyLocator.textContent();\n    const itemCount = parseInt(bodyText.split(' ')[0]);\n    expect(itemCount).toBe(count);\n  }\n}\n\ntest('test', async ({ page }) =\u003e {\n  const todoPage = new TodoPage(page);\n  await todoPage.navigateTo();\n\n  await todoPage.addTodoItem('Buy Milk');\n  await todoPage.assertTodoItemCount(1);\n\n  await todoPage.addTodoItem('Buy Bread');\n  await todoPage.assertTodoItemCount(2);\n\n  await todoPage.markAllAsComplete();\n  await todoPage.assertTodoItemCount(0);\n});\n```\n\n### Visual Comparisons\n\nWhen running locally, visual comparisons are ignored (as set in the `playwright.config.ts` file):\n\n```sh\nnpx playwright test demo-todo-app.spec.ts:259 --workers=1 --project=firefox --update-snapshots\nnpx playwright test demo-todo-app.spec.ts:259 --workers=1 --project=chromium\n```\n\nWhen running on the Playwright Testing service, visual comparisons are enabled (as set in the `playwright.service.config.ts` file)::\n\n```sh\n# Edit `playwright.config.ts` to enable visual comparisons (ignoreSnapshots: false)\nnpx playwright test demo-todo-app.spec.ts:259 --config=playwright.service.config.ts --project=firefox --update-snapshots\n\n# This should fail as it's a different browser and it has a different rendering engine (can also use Windows instead of Linux)\nnpx playwright test demo-todo-app.spec.ts:259 --config=playwright.service.config.ts --project=webskit\n\n# Reset `playwright.config.ts` to disable visual comparisons (ignoreSnapshots: true)\n```\n\n### Run tests on CI (GitHub Actions)\n\n**Setup: one-off setup for the workflow**\n\n* [Generate an access token](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-automate-end-to-end-testing?tabs=github#configure-a-service-access-token) in the Playwright Testing workspace\n* Store the access token in a GitHub repository secret with the name `PLAYWRIGHT_SERVICE_ACCESS_TOKEN`\n* Fetch the Playwright Service URL for your workspace\n* Store the Playwright Service URL in a GitHub repository secret with the name `PLAYWRIGHT_SERVICE_URL`\n* Check that `playwright.service.config.ts` is committed to the repository, check the [sample one](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-automate-end-to-end-testing?tabs=github#update-the-workflow-definition) in the docs or download it from your Playwright Testing workspace under the section \"Add Playwright Service Configuration\"\n* Update the GitHub Actions workflow file to run the tests on CI based on [this sample](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-automate-end-to-end-testing?tabs=github#update-the-workflow-definition)\n\n**Enable workflow: one-off setup for the workflow**\n\n* Ensure the workflow **Playwright Tests** is enabled in the GitHub Actions tab of the repository\n* Make any necessary changes to the workflow file (`.github/workflows/playwright.yml`) and commit them to the repository\n\n**View the playwright report and traces**\n\n* Navigate to the **Playwright Tests** workflow run\n* Select the most recent workflow run click the **acceptance-tests** job to see the logs\n* Go back to the **Summary**\n* In the **Artifacts** section, download the report and traces contained in the `playwright-report` aritfact ZIP file\n* Unzip the directory `playwright-report`\n* From the command-line, run the playwright report viewer:\n\n```sh\ncd ~/Downloads/\nrm -rf ./playwright-report ./playwright-report.zip\nunzip playwright-report.zip -d playwright-report\n\nnpx playwright show-report playwright-report\n# Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.\n```\n\nNavigate to the URL [http://localhost:9323](http://localhost:9323) in your browser to view the report.\n\n**Commit a failing tests and view report with traces**\n\n* Open the file `demo-todo-app.spec.ts`, change these tests to fail:\n\nLine 64: `await expect(todoCount).toHaveText(/2/);`\nLine 145: `await expect(firstTodo).toHaveClass('complete');`\nLine 146: `await expect(secondTodo).toHaveClass('complete');`\n\n* Also, change the `PLAYWRIGHT_SERVICE_OS` in GitHub Actions to `windows` and save before committing and pushing the changes to the repository\n* Commit and push the changes to the repository - the tests should fail\n* Download the `playright-report` artifact from the workflow run\n* View only failing tests and traces in the report\n\n**Fix the failing test and view report**\n\n* Revert the changes made above.\n* The tests should pass.\n* Show the caches for all workflows as well and explain that this can save time on subsequent runs.\n\n## Resources\n\n* [Playwright Docs - Getting Started / Installation](https://playwright.dev/docs/intro)\n* [Visual Comparisons](https://playwright.dev/docs/test-snapshots)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarenceb%2Fplaywright-basic-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclarenceb%2Fplaywright-basic-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarenceb%2Fplaywright-basic-demo/lists"}