https://github.com/stefruseva88/js-app-e2e-tests
End-to-End testing of Single Page JS App with Playwright and QUnit
https://github.com/stefruseva88/js-app-e2e-tests
e2e-testing playwright-javascript qunit-tests ui-testing
Last synced: 5 months ago
JSON representation
End-to-End testing of Single Page JS App with Playwright and QUnit
- Host: GitHub
- URL: https://github.com/stefruseva88/js-app-e2e-tests
- Owner: StefRuseva88
- License: mit
- Created: 2024-08-18T10:52:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-07T10:53:54.000Z (12 months ago)
- Last Synced: 2025-01-07T11:40:57.044Z (12 months ago)
- Topics: e2e-testing, playwright-javascript, qunit-tests, ui-testing
- Language: JavaScript
- Homepage:
- Size: 1020 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Automated e2e Testing of Single Page App with Playwright and QUnit
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://qunitjs.com/)
[](https://playwright.dev/)
## This is a Project for Front-End Technologies May 2024 Course @ SoftUni
---
## 🔄 Project Summary
- Configure the project for testing.
- Develop integration tests.
- Execute and verify test results.
- Assess different functionalities within the SPA.
## 🔨 Setup Guide
### 1. Prepare the Project for Testing
1. **Open Project:**
- Launch the SPA project in Visual Studio Code.
2. **Organize Testing Files**
- Create a `tests` folder.
- Within `tests`, create `QUnit_tests` and `Playwright_tests` subfolders.
3. **Set Up Test Files:**
- In `QUnit_tests`, create `test.html`.
- Add `integration.test.js` in the same folder.
4. **Install "Live Server" Extension in VS Code for smooth test execution.**
5. **Install Playwright:**
- Add Playwright to your project:
```
npm install @playwright/test --save-dev
```
- Install required browsers:
```
npx playwright install
```
7. **Configure Playwright:**
- In your project’s root directory, create a `playwright.config.js` file and set up your testing environment.
7. **Start the App Server:**
- Ensure your server is active. Update `package.json` if necessary to include a "server" script and start it with:
```
npm run server
```
## ⚛️ Executing Tests
1. **Running QUnit Tests:**
- Open `test.html:` and right-click on `test.html` then select "Open with Live Server" to launch it in your browser. You should see the test interface displayed.
2. **Running Playwright Tests:**
- In the `Playwright_tests` folder, create a new file, e.g., `e2e.test.js`, and write your Playwright tests.
- Execute the tests using one of the following commands:
```
npx playwright test/npm run test
```
- The results will be displayed in the terminal. You can also generate a report by running:
```
npx playwright show-report
```
## ✔️ Functional Testing
### 1. **Game Functionality Tests**
- Retrieve All Games: Test the API endpoint to fetch all games and validate the response.
- Create Game: Test the creation of a new game and ensure it returns the correct response.
- Get Game by ID: Confirm that fetching a game by its ID functions properly.
- Edit Game: Test the update of an existing game and verify the changes.
- Delete Game: Ensure the deletion of a game works as expected.
### 2. **Comment Functionality Tests**
- Test a New Game with No Comments: Ensure that new games initially have no comments.
- Post a New Comment: Test adding a new comment and verify the response.
- Comments for a Specific Game: Check that comments for a specific game are correctly retrieved.
## ✔️ License
This project is licensed under the [MIT License](LICENSE). See the [LICENSE](LICENSE) file for details.
## 📧 Contact
For any questions or suggestions, please open an issue in the repository.
---
### Happy Testing! 🚀