automation-frontend-playwright-typescript-github-actions

Base automation project to test the UI/FrontEnd of any project by using: Playwright - TypeScript - GitHub Actions.

---

Table of contents

• Getting started
  • Install Git locally
  • Install Node locally
• Configure this project
• Quick run
• Run tests in UI/GUI mode
• Run tests in Headless mode
• GitHub Actions Support
  • Run Tests with GHA
  • Test, Can I Deploy?, Deploy
• Additional Commands
• Miscellaneous
• Primary Authors
• Other Contributors
• MIT license
• Change Log

---

Getting started

Install Git locally

You can follow one of these links:

Option	Link	Command
Windows, Linux, Mac	git-scm.com/Getting-Started-Installing-Git	use the Link depending on your OS
Homebrew	atlassian.com/install-git	brew install git

Install Node locally

You can follow one of these links:

Option	Link	Command
Windows, Linux, Mac	nodejs.org/download/current	use the Link depending on your OS
Homebrew	formulae.brew.sh/formula/node	brew install node
NVM	github.com/nvm-sh/nvm	brew install nvm

Node recommended Version: Latest.
For Example, if you are using nvm, you can run:

nvm install node

---

Configure this project

Open your console/terminal and run this:

cd Desktop #or: >cd </your/desired/project/path/> 
git clone https://github.com/cvera08/automation-frontend-playwright-typescript-github-actions.git
cd automation-frontend-playwright-typescript-github-actions
npm ci #or: >npm i

---

Quick run

Please follow to this section ▼

---

Run tests in UI/GUI mode

By using your console/terminal, make sure you are on the right path and run this:

#if you are not already there: >cd </your/desired/project/path>/automation-frontend-playwright-typescript-github-actions
npx playwright test --ui

After this:

• You may be redirected to a Chromium Playwright runner,
• Click on the green play/run button to start running your tests,
  • Or hit the play/run button on your desired specific test,
• After you click on one or the other, Playwright will start automatically the execution and after a while, you will see the output results.

_{// Please remember you have the full ability to run your tests on any desired browser, like chromium, firefox, webkit. Just click on the arrow at the left of the "Filter (e.g. text, @tag)" option to see more alternatives. Chromium is the default one.}

_{// You may not want to use the Status (passed, failed, skipped) filter/check boxes before executing some tests, otherwise you will not see your tests anymore (since they were not executed yet).}

Demo open/GUI mode:

Troubleshooting GUI mode:

If you face some error you need to be sure you are in the base project folder (automation-frontend-playwright-typescript-github-actions) and run 'the following command' again (make sure not to have errors or fix them according to the printed help).

npm install

If it still does not work, try restarting all the involved programs (like Playwright/IDE/etc), even your computer if it is necessary and start over again.

<sub>// HINTS:
- If the Playwright window becomes unresponsive for some reason try switching to another application/program and come back.
- If you click in your Playwright runner and open a new empty window, just close it and next time try switching with your TAB key instead.</sub>

---

Run tests in Headless mode (with option for html report visualization)

Try running this:

#if you are not already there: >cd </your/desired/project/path>/automation-frontend-playwright-typescript-github-actions
npx playwright test

You will get something like this:

To open the last html report:

npx playwright show-report
#A similar output will be displayed: Serving HTML report at http://localhost:9323. 
##Press Ctrl+C to quit.

Demo html report in headless mode:

---

GitHub Actions Support

This repository has the support for its own GHA as well.

Run Tests with GHA

You can go to this repository > Actions Tab > Playwright Tests option at the left.
Or just use this direct Link instead.

Once you are in the GitHub Actions for Playwright Tests you can hit the Run workflow button, select the desired branch to run your tests (optional) and click on the Run workflow green button.

Your tests will automatically start to run and after a while, you may see the results for it.

Feel free to download the playwright html report from the main execution page -> Artifacts option:

Test, Can I Deploy?, Deploy

As in the previous Run Tests with GHA section, you can use the Actions tab > and then Call Makefile Dispatch left option. Or just use this direct Link instead.

Once there you can run the workflow manually (like in the previous steps) and you will be able to see one of these two scenarios:

For the second screenshot 👆 we can see that the Deploy is being Stopped on purpose because of the failing test/s.

Source/Demo:

• Success Run
• Fail Run

---

Additional Commands

Inside your working directory, you can run several commands:

npx playwright test

Runs the end-to-end tests.

npx playwright test --ui

Starts the interactive UI mode.

npx playwright test --project=chromium

Runs the tests only on Desktop Chrome.

npx playwright test example

Runs the tests in a specific file.

npx playwright test --debug

Runs the tests in debug mode.

npx playwright codegen

Auto-generate tests with Codegen.

We suggest that you begin by typing:

npx playwright test

And check out the following files:

• ./tests/example.spec.ts - Example end-to-end test
• ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
• ./playwright.config.ts - Playwright Test configuration

Visit playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

---

Miscellaneous

N/A.

---

Primary Authors

• Carlos Vera

  @cvera08 is the current creator and maintainer of the code and has written much of the current code base, including complete refactors, bug fixing and general improvements to the existing code base. He started out by authoring many, if not all, of the available e2e automation test cases, has been assisting with maintenance and adding project documentation.

---

Other Contributors

N/A.

---

MIT license

Copyright (c) 2023 Carlos Vera

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

Change Log

Stable Builds:

• Sep 25, 2023 -- v6.0.0

  • Fail Test on Purpose.
  • Test All Actions & Tasks.

• Sep 18, 2023 -- v5.1.1

  • Record Deployment Task.
  • Playwright Installation Make Task.
  • Playwright Test Make Task.

• Aug 28, 2023 -- v5.0.6

  • Environments (GHA).
  • No Dependent Check.
  • Test, Can i Deploy & Deploy Tasks.
  • No Deploy Make Task.

• Aug 9, 2023 -- v4.0.2

  • Makefile.
  • Makefile & GHA Dispatch.

• Aug 7, 2023 -- v3.0.4

  • Manual Dispatch to Run the Tests.

• Jul 16, 2023 -- v3.0.3

  • GitHub Actions.

• Jul 12, 2023 -- v2.1.0

  • Tests Demo.

• Jul 9, 2023 -- v2.0.1

  • Documentation.
  • Playwright Runners.

• Jul 8, 2023 -- v2.0.0

  • First Tests.

• Jun 30, 2023 -- v1.0.0

  • Initial Playwright Project.

---