Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterston-e/playwright-100-percent-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.
https://github.com/peterston-e/playwright-100-percent-coverage-of-a-simple-weather-app
e2e-testing nextjs playwright react typescript
Last synced: about 2 months ago
JSON representation
E2E testing with Playwright: 100% coverage of a simple weather app. Intercepts HTTP requests, mocks data, UI verification and automated GitHub Actions integration.
- Host: GitHub
- URL: https://github.com/peterston-e/playwright-100-percent-coverage-of-a-simple-weather-app
- Owner: peterston-e
- Created: 2024-07-17T10:59:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-19T12:23:51.000Z (7 months ago)
- Last Synced: 2024-10-31T03:25:33.936Z (3 months ago)
- Topics: e2e-testing, nextjs, playwright, react, typescript
- Language: TypeScript
- Homepage: https://playwright-100-percent-coverage-of-a-simple-weather-app.vercel.app
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
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](https://playwright-100-percent-coverage-of-a-simple-weather-app.vercel.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:
```bash or zsh
npm install
```Run the development server to see the UI:
```bash or zsh
npm run dev
```Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
Run all tests:
```bash or zsh
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](https://playwright.dev/docs/intro)
- [Tailwind Documentation](https://tailwindcss.com/docs/installation)
- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://react.dev/reference/react)
- [Typescript Documentation](https://www.typescriptlang.org/docs/)### 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](https://www.linkedin.com/in/peter-faretra-3661a32a6/)
## Acknowledgments
- [QA Wolf](https://github.com/qawolf)
- [School of Code](https://github.com/SchoolOfCode)