🎭 Playwright Sandbox

I have created this repo to both practice playwright and in the process create a feature rich template project that QAs can use for their real projects for doing end to end test automation.

Note

As the name suggests, this is a draft - work in progress - project. You may refer it to get a lot of cool things out of it but do remember that this is not a refined project (for example, at the moment, the Readme.md (or overall design) is very raw and not yet refined).

🏃🏻‍♂️ Runme

npm run prettier

npm run lint

🚀 Getting Started

Clone project

Start by cloning the repo on your local machine.

Install dependencies

Install NodeJS if not already installed.

Install project dependencies by running below command:

npm install

Run tests

Use the VS Code Extension to run the tests in the tests folder from VS Code or run the following command in the terminal:

npx playwright test --ui

🐞 Playwright Test report

Test report URL for the latest run in CI is available in the run itself and here:: https://pramodkumaryadav.github.io/playwright-sandbox/

Note

• For the above report to be available, as a one time measure, a project admin or maintainer has to manually enable Pages settings to use GithHub Actions as a source for Build and Deployment.
• The detailed steps are mentioned in github official docs here: Required steps are from step 1 till 4. Step 5 is to be skipped, since we already have workflow in our repository.

Contributing to the project

Install Husky, ESLint, and Prettier

We use a mix of Husky, ESLint and Prettier within our repository to help enforce consistent coding practices.

• Husky is a tool that will install a pre-commit hook to run the linter any time before you attempt to make a commit.
• To install the pre-commit hook you will need to run

npm run prepare

Secrets

All secrets should be stored in CI using GitHub secrets and locally using .env.env-name files.

Dotenv files

Secrets for each test envirnoment i.e. (local, dev, staging) are to be added in different test files such as .env.local, .env.dev, .env.staging.

You should ignore all .env* files in .gitignore file so that we do not unintentionally commit and push secrets in our PRs.

Reference

• Playwright Home Page 🎭 with Node.js.
• Use Prettier for code formatting
• All prettier options that can be overriden are here. However note that defaults are good enough and need no further changes except one made in .prettierrc file for both practical reasons and demo purposes.
• Pre Commit hook for Code formatting. We use option 1; and as recommended in their docs, commit .husky directory in git to share with all team members.
• Runme