{"id":15102686,"url":"https://github.com/bakkappan/playwright-typescript-framework","last_synced_at":"2026-02-02T00:35:52.290Z","repository":{"id":248631000,"uuid":"828987355","full_name":"BakkappaN/Playwright-TypeScript-Framework","owner":"BakkappaN","description":"Playwright TypeScript Automation Framework","archived":false,"fork":false,"pushed_at":"2024-07-16T04:13:58.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T11:42:11.861Z","etag":null,"topics":["playwright","playwright-api","playwright-api-testing","playwright-api-testing-tutorial","playwright-automation","playwright-automation-testing","playwright-automation-tutorial","playwright-codegen","playwright-demo","playwright-pom","playwright-report","playwright-test-runner","playwright-testing","playwright-tests","playwright-tutorial","playwright-typescript","playwright-ui"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/@testerstalk","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/BakkappaN.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-07-15T14:23:06.000Z","updated_at":"2024-09-28T21:05:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"a54144ce-b72e-4438-a91a-126fc5bc6733","html_url":"https://github.com/BakkappaN/Playwright-TypeScript-Framework","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"416862422480f931846c105af72e39d75434fc27"},"previous_names":["bakkappan/playwright-typescript-framework"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BakkappaN/Playwright-TypeScript-Framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BakkappaN%2FPlaywright-TypeScript-Framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BakkappaN%2FPlaywright-TypeScript-Framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BakkappaN%2FPlaywright-TypeScript-Framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BakkappaN%2FPlaywright-TypeScript-Framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BakkappaN","download_url":"https://codeload.github.com/BakkappaN/Playwright-TypeScript-Framework/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BakkappaN%2FPlaywright-TypeScript-Framework/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261304267,"owners_count":23138301,"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":["playwright","playwright-api","playwright-api-testing","playwright-api-testing-tutorial","playwright-automation","playwright-automation-testing","playwright-automation-tutorial","playwright-codegen","playwright-demo","playwright-pom","playwright-report","playwright-test-runner","playwright-testing","playwright-tests","playwright-tutorial","playwright-typescript","playwright-ui"],"created_at":"2024-09-25T19:04:36.921Z","updated_at":"2026-02-02T00:35:52.261Z","avatar_url":"https://github.com/BakkappaN.png","language":"TypeScript","readme":"### Playwright Tutorial Full Course - https://bit.ly/playwright-tutorial-automation-testing\n### Playwright API Testing Tutorial - https://bit.ly/playwright-api-testing-tutorial\n### Playwright with Dynamics 365 CRM - https://youtu.be/WwovRRp0f4o?si=oqPE2ux7UcDeJMm6\n### Playwright with Azure DevOps Pipeline - https://bit.ly/playwright-azure-devops-tutorial\n\n#### Install Playwright \u0026 Select Configurations\n- npm init playwright@latest\n\nPlaywright will download the browsers needed as well as create the following files.\n\n- node_modules\n- playwright.config.js\n- package.json\n- package-lock.json\n- tests/\n    example.spec.js\n- tests-examples/\n    demo-todo-app.spec.js\n\n  \n#### dotenv Package Installation Command\n- npm install dotenv --save\n\n#### csv-parse Package Installation Command\n- npm install csv-parse\n\n#### faker-js plugin for test data generation\n- npm install @faker-js/faker --save-dev\n\n#### luxon plugin for custom dates\n- npm install --save luxon\n\n## Playwright Important Commands\n\n  npx playwright install\n   - Install Browsers manually.\n    \n  npx playwright test\n   - Runs the end-to-end tests.\n\n  npx playwright test --ui\n   - Starts the interactive UI mode.\n\n  npx playwright test --project=chromium\n   - Runs the tests only on Desktop Chrome.\n\n  npx playwright test example\n  -  Runs the tests in a specific file.\n\n  npx playwright test --debug\n  - Runs the tests in debug mode.\n\n  npx playwright codegen\n- Auto generate tests with Codegen.\n\nWe suggest that you begin by typing:\n\n    npx playwright test\n\n### And check out the following files:\n  - .\\tests\\example.spec.js - Example end-to-end test\n  - .\\tests-examples\\demo-todo-app.spec.js - Demo Todo App end-to-end tests\n  - .\\playwright.config.js - Playwright Test configuration\n\n## Allure Report with Playwright [Screenshots, Videos \u0026 Traces]\n- Step1: Install Allure Report command-line tool\n  ### npm install --save-dev allure-commandline\n  \n- Step2: Install the Allure Playwright adapter.\n  ### npm install --save-dev allure-playwright\n\n- Step3: Add below config in playwright.config.js file.\n  ### reporter:[\n  ### ['html'],\n  ### ['allure-playwright']\n  ### ],\n\n- Step4: Run Playwright tests.\n  ### npx playwright test\n\n- Step5: Generate Allure Report\n  ### npx allure serve allure-results\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/0dc08076-a4ba-4f9f-9b89-ecd8fc81f5ba)\n\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/5fc751fa-81ca-4dc6-9c49-54834258d0aa)\n\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/36161f37-2cf2-4373-a30d-f888adb405de)\n\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/b7ef2588-adbd-40fc-9801-ed1554fd38ef)\n\n\n\n## Playwright Test Report\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/dd9e360b-bd9e-425a-9191-848a13791d29)\n\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/9ea0128b-5906-476f-9fc7-615b240d7623)\n\n![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/379bb630-b84d-4a47-a70e-8afca0d33240)\n\n\n## Integrate Playwright with Azure Devops Pipeline\nThere are 2 options, option1 is using yaml file \u0026 option2 is without using yaml file. let's see one by one\n\n1. Option1 - Using YAML File\n   - Step1: Create a new project in ADO then Click on Project\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/0ec3b6b7-748f-4d0a-80bf-762e24728afb)\n\n   - Step2: Click on Repos \u0026 Let's create new repository, Click on New reposiotry\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/fe0485c8-2708-456b-9030-a046b1170c70)\n\n   - Step3: Enter Repository name \u0026 Click on Create\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/ea15010a-4308-41c2-883e-f0ddee48908f)\n    ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/0ee53f40-2d9e-4dbb-8301-5cc2c615d647)\n\n   - Step4: Click on Clone button and get the URL. Go to your system then clone repository.\n   - Step5: Add all the playwright framework folders inside cloned repository\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/b8039254-cba5-46ff-9696-0aad20dd9876)\n\n   - Step6: Push all the folders into Azure devops\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/add3e34a-5ba8-4792-9d2c-dbae06bc6a64)\n\n   - Step7: Repository is ready now, let's create pipeline. Click on Pipelines-\u003eCreate Pipeline\n   - ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/7bb2f8dc-8253-46ab-879a-743446211bdf)\n\n   - Step8: Click on Azure Repos Git\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/885628e1-8e4c-43fc-ba6a-6125ec34e6fb)\n\n   - Step9: Select previously created repository\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/09b1489d-f699-4885-84a4-c06554adc3e6)\n\n   - Step10: Select Starter Pipeline\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/3db45ed6-c0c9-4033-b786-b8ca7e263ce4)\n\n   - Step11: Copy below yaml content and paste it inside azure-pipelines.yml file. \n```\ntrigger:\n- main\n\npool:\n  vmImage: ubuntu-latest\n\nsteps:\n- task: NodeTool@0\n  inputs:\n    versionSpec: '18'\n  displayName: 'Install Node.js'\n- script: npm ci\n  displayName: 'npm ci'\n- script: npx playwright install --with-deps\n  displayName: 'Install Playwright browsers'\n- script: npx playwright test\n  displayName: 'Run Playwright tests'\n  env:\n    CI: 'true'\n```\nIf you are running in self hosted agent replace pool commands\n```\npool:\n   name: AgentPoolName\n   demands:\n   - agent.name -equals AgentName\n```\n   - Step12: Click on Save and run\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/208f9b43-735a-45e1-b5c3-699df9e6d8f2)\n    ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/41262f5d-6e80-4274-a4fc-75d0536e73a7)\n\n   - Step13: You will see job queued like this.\n   - ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/1fff0860-2ac5-45b0-aa45-757afb76777e)\n\n   - Step14: Click on Job \u0026 Verify build status.\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/66326c8f-d789-4856-b90c-8909bef95930)\n\n   - Step15: Now let's Upload playwright-report folder with Azure Pipelines \u0026 Report generation\n     Firstly update azure-pipelines.yml file\n```\ntrigger:\n- main\n\npool:\n  vmImage: ubuntu-latest\n\nsteps:\n- task: NodeTool@0\n  inputs:\n    versionSpec: '18'\n  displayName: 'Install Node.js'\n- script: npm ci\n  displayName: 'npm ci'\n- script: npx playwright install --with-deps\n  displayName: 'Install Playwright browsers'\n- script: npx playwright test\n  displayName: 'Run Playwright tests'\n  env:\n    CI: 'true'\n\n- task: PublishTestResults@2\n  displayName: 'Publish test results'\n  inputs:\n    searchFolder: 'test-results'\n    testResultsFormat: 'JUnit'\n    testResultsFiles: 'e2e-junit-results.xml'\n    mergeTestResults: true\n    failTaskOnFailedTests: true\n    testRunTitle: 'My End-To-End Tests'\n  condition: succeededOrFailed()\n- task: PublishPipelineArtifact@1\n  inputs:\n    targetPath: playwright-report\n    artifact: playwright-report\n    publishLocation: 'pipeline'\n  condition: succeededOrFailed()\n```\n     \n   - Step16: Verify playwright-report folder attachment \u0026 report.\n       From job we can navigate into artifacts folder. Download playwright report and verify results.\n    ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/54aaf4b4-7715-435d-b96a-7a19c23fa384)\n    ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/5ed6c543-4162-43a9-9f21-9643d7f52438)\n\n   \n2. Option2 - Without using YAML File\n   - Step1: Repeat step 1 to 6 above from Option1\n   - Step2: Click on Pipelines then click on New Pipeline\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/1f753af4-881e-495d-a7dd-8c9163de97ff)\n\n   - Step3: Click on Use the classic editor \u0026 Click on Continue\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/499f6cf4-0458-4aba-813a-ad131cea4b02)\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/332011f7-0ae4-46ce-a9c2-3c2a9d66f599)\n\n   - Step4: Click on Emtpy job\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/d84dda85-cbc0-4c9f-9147-bc1de36823c4)\n\n   - Step5: Click on + icon, Search for Node and add Node.js tool installer\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/73d32c4d-2cd1-4f78-beb7-ec1bf5f5138a)\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/64fcf35f-1200-4ccf-b34c-d53072728ced)\n\n\n   - Step6: Select just now added task and add Node v16 becuase playwright supports for Node v14 and above\n   - ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/aa804427-464c-434f-b4e4-27547b245bd9)\n\n   - Step7: Click on + icon, Similary add Command line task,\n     Display name: Install Playwright \u0026 Dependencies\n     Script: npm install \u0026\u0026 npx playwright install\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/df63a628-ccb4-4709-8c2a-166358dc5264)\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/70991c9e-ad21-4ab8-978e-ba02d0f5971f)\n\n     Click on Advanced-\u003e Click on little icon(i) \u0026 select the Link. This will enable working directory for the task.\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/1d6dc42d-e720-4446-b1f7-4589f105ff04)\n\n   - Step8: Add another task by clicking on + icon, search for npm \u0026 Add npm\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/49eadf73-d640-4c7d-8ea6-730f2291d503)\n\n     Enter Display name, Select Command as custom \u0026 Enter Command and Arguments as run tests\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/f055ace0-8cdb-46e7-9f24-33c808eef4ee)\n\n     In this task we are referring to the package.json file.\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/6074a566-6efb-46a7-ad37-2108eed90bf8)\n\n   - Step9: Once everthing is completed now it is a time run script. Click on Save \u0026 queue.\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/112334f9-6adb-43a5-b2d4-41f364c7527d)\n\n    Add commit message then click save \u0026 run.\n   \n   - Step10: It looks like this\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/ae48637e-d0bf-4a32-8d93-2ea251301068)\n\n     Click on Job and you will see a screen like this\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/b135a6c0-039c-4b90-934c-849b35e47cbc)\n\n   - Step11: We can also upload playwright-report using Publish Pipeline Artifacts task\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/138a4af7-addd-4498-8296-64468c957610)\n\n   - Step12: Let's Publish Test Results using Publish Test Results task\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/f0ea2efe-3509-4e48-baa5-01a2ec9f283d)\n\n\n   - Let's run the pipeline\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/575518de-feed-4267-b7f1-290e4ad76903)\n\n   - Artifacts are published \u0026 also we have published test results\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/d575766a-2f20-42f2-a1e3-aa5f71259823)\n\n     ![image](https://github.com/BakkappaN/PlaywrightTutorialFullCourse/assets/22426896/45821475-feb2-4b16-a9ae-126c55cf20a1)\n\n\n\n\n\n  \n  \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbakkappan%2Fplaywright-typescript-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbakkappan%2Fplaywright-typescript-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbakkappan%2Fplaywright-typescript-framework/lists"}