Playwright Test Suite for Test Bank
View the whole project on GitHub
Test Bank is a demo web application built for testing purposes. In this project, I focused on validating the functionality, usability, and security of the Login and Home pages. I verified correct UI rendering, authentication with valid and invalid credentials, proper handling of edge cases, and the functionality of key Home page elements like the navigation bar, user icon, and sign-out feature.
Tech Stack
-
Web Page: HTML, CSS, JavaScript
-
Test Suite: Playwright, JavaScript
-
CI/CD: GitHub Actions
Test Suite Features
-
Login Page: Testing the login functionality and the structure of the login page.
-
Home Page: Testing the log out functionality and the structure of the home page and navigation bar.
-
Edge-Case Coverage: Empty fields, invalid creds, SQL injections, etc.
-
Page Object Model: Clear separation of page structure and test logic.
-
CI Pipeline Integration: Tests that run successfully in GitHub pages.
-
Reporting: HTML reports in the pipeline.
This project follows the Page Object Model (POM) design pattern, which promotes clean, maintainable, and reusable test code by separating page interactions into dedicated classes. Additionally, a Continuous Integration (CI) pipeline has been implemented to automatically run the test suite on each commit, ensuring early detection of issues and maintaining code quality throughout the development process.
In the following code snippets, I will showcase some of the tests I have written for this project.​
Verifying login with valid credentials
The Test Bank web application currently supports login with three predefined user credentials, stored in the test-data folder. The test below iterates through the array of test users and attempts to log in with each one.
Testing SQL injections in the login form
The test below verifies that the login form is secure against SQL injection attacks. It attempts to log in using a common SQL injection pattern as both the email and password. The test then checks that an appropriate error message is displayed and that the user is not logged in, confirming the application's resistance to this type of vulnerability.
Verifying page text content
The test below verifies that the correct text content is displayed on the "Products" tab. After navigating to the tab by clicking the corresponding button, it checks that each bullet point in the list matches the expected product names: "Checking Accounts," "Savings," "Demo Credit Cards," and "Test Loans." This ensures that the page content is accurate and properly rendered for users.
These three examples provide a glimpse into the structure and focus of the test suite. To explore the full suite of tests, please visit the GitHub repository.
Happy Flow :)
I have created an end-to-end test flow that verifies whether a user can successfully log in and then log out of the application. This test ensures that the authentication process functions correctly from start to finish, confirming both the login and logout features work as expected and that the user's session is properly managed.