Playwright 100% Coverage of a simple weather app

E2E testing with Playwright: 100% coverage of a simple weather app. Intercepts HTTP requests, mocks data, UI verification and automated GitHub Actions integration. This project was designed to help me learn som of the more complex aspect of Playwright that goes beyond simply assertions and makes use of the powerful data mocking and route capabilities.

App will request you location. No data is collected or used. Deployed with Vercel The Weather App

Playwright tests

1. Intercepts the HTTP requests with the .route() method to modify and mock the data.
2. Verifies the response from the actual API requests is OK.
3. Data Mocking: Replaces the response data with hard coded json object.
4. Mimics the asynchronous call to the browsers geolocation method.
5. UI Verification: Assert that elements are correctly displayed on a deployed site.

Github Actions integration

1. YML file added to run tests on push to main.
2. Further steps can be taken on your github account to create rules to only allow merging if all tests pass.

Weather app

1. Requests permission to use the Geolocation API. navigator.geolocation.getCurrentPosition()
2. Makes a API request for location name to a reverse geo API using the current position.
3. Makes a second API request to Meteo weather for current condition also using the geolocation data.
4. Displays the data collected to show current weather in your locality.

---

Tech Stack

Playwright, TypeScript, React, Tailwind CSS, Next.js

Getting Started

👍 This app will request your current position to show the weather. No data is collected or used. This is purely for demonstration purposes.

Install the dependencies:

npm install

Run the development server to see the UI:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Run all tests:

npx playwright test

Contributing

If you would like to contribute to the Project in any way please make a pull request and I will consider the changes. The app is using Tailwind CSS and you can get started modifying the src/app/page.tsx classes.

If you spot any flakey tests, raise an issue and suggest changes or fix the problem and make a pull request explaining your reasons and code.

To learn more about Playwright, Tailwind, Next.js and React, take a look at the following resources:

• Playwright Documentation
• Tailwind Documentation
• Next.js Documentation
• React Documentation
• Typescript Documentation

Rules

• Any changes have to pass the playwright tests.
• You can alter the tests but only if you make significant changes to the UI.

Authors

Contributors names and contact info will be added to this list.

• Primary Contributor: Peter Faretra Linkedin

Acknowledgments

• QA Wolf
• School of Code