Skip to content

Commit 02d2e1c

Browse files
HusneShabbirHusneShabbirrsoaresdmfrancisc
authored
Add End-to-End Tests for Sandbox Plugin Using Playwright (#813)
* sandbox_E2E_tets * added readme file * Modified yarn.lock and config.ts in sandbox workspace * update @playwright/test and browser binaries to latest versions * Renammed config file * Renamed config file * Update app-config.yaml * Update workspaces/sandbox/packages/app/Utils/loginPage.ts Co-authored-by: Rafaela Maria Soares da Silva <rsoaresd@redhat.com> * Modified Locators & code logic * Update app.test.ts * Update package.json * Re-Update package.json * Modified Locators & code logic * Updated comments in the test file Co-authored-by: Francisc Munteanu <fmuntean@redhat.com> * Updated env variable Co-authored-by: Rafaela Maria Soares da Silva <rsoaresd@redhat.com> * Update workspaces/sandbox/packages/app/e2e-tests/README.md Co-authored-by: Rafaela Maria Soares da Silva <rsoaresd@redhat.com> --------- Co-authored-by: HusneShabbir <husneshabbir447@gmail.com> Co-authored-by: Rafaela Maria Soares da Silva <rsoaresd@redhat.com> Co-authored-by: Francisc Munteanu <fmuntean@redhat.com>
1 parent a66e0b0 commit 02d2e1c

9 files changed

Lines changed: 518 additions & 25 deletions

File tree

‎workspaces/sandbox/.eslintignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
playwright.config.ts
1+
sandboxplaywright.config.ts

‎workspaces/sandbox/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,14 @@ e2e-test-report/
5555

5656
# generated by 'npx @janus-idp/cli@3.3.1 package package-dynamic-plugins --export-to .'
5757
index.json
58+
59+
60+
# Environment variables
61+
**/.env
62+
63+
# Playwright
64+
**/node_modules/
65+
**/test-results/
66+
**/playwright-report/
67+
**/blob-report/
68+
**/playwright/.cache/

‎workspaces/sandbox/package.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,16 @@
2525
"lint:fix": "backstage-cli package lint --fix",
2626
"prettier:check": "prettier --check .",
2727
"new": "backstage-cli new --scope @red-hat-developer-hub",
28-
"postinstall": "cd ../../ && yarn install"
28+
"postinstall": "cd ../../ && yarn install",
29+
"test:base": "playwright test --config=sandboxplaywright.config.ts",
30+
"tests": "npm run test:base",
31+
"test:ui": "npm run test:base -- --ui",
32+
"test:headless": "npm run test:base -- --headless",
33+
"test:headed": "npm run test:base -- --headed",
34+
"test:debug": "npm run test:base -- --debug",
35+
"test:chromium": "npm run test:base -- --project=chromium",
36+
"test:firefox": "npm run test:base -- --project=firefox",
37+
"test:webkit": "npm run test:base -- --project=webkit"
2938
},
3039
"workspaces": {
3140
"packages": [
@@ -43,6 +52,7 @@
4352
"@backstage/e2e-test-utils": "^0.1.1",
4453
"@backstage/repo-tools": "^0.10.0",
4554
"@changesets/cli": "^2.27.1",
55+
"@playwright/test": "^1.52.0",
4656
"@spotify/prettier-config": "^12.0.0",
4757
"@types/lodash": "^4.17.16",
4858
"knip": "^5.27.4",

‎workspaces/sandbox/packages/app/e2e-tests/README.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
# Playwright Test Automation - README
2+
3+
This folder contains Playwright tests for automating the verification of the sandbox plugin. It covers the following functionalities:
4+
5+
1. **Homepage Layout and Welcome Text Verification**
6+
2. **OpenShift Card Interaction**
7+
3. **Activities Page and Article Popup Test**
8+
9+
## Prerequisites
10+
11+
Before running the tests, ensure that you have the following:
12+
13+
- **Node.js** (version >= 16.x) installed.
14+
- **Playwright** installed as a dependency.
15+
- **.env File** containing the necessary credentials and base URL.
16+
17+
### .env File Configuration
18+
19+
Ensure you have a `.env` file at the root(workspaces/sandbox/) of your project with the following variables:
20+
21+
```
22+
23+
SSO_USERNAME=<Your SSO ID>
24+
SSO_PASSWORD=<Your SSO Password>
25+
BASE_URL=<Your Base URL>
26+
ENVIRONMENT=<dev or e2e-tests>
27+
```
28+
29+
## Setup Instructions
30+
31+
### 1. Install Dependencies
32+
33+
Clone this repository (or set it up on your local machine) and install the required dependencies.
34+
35+
```bash
36+
git clone <your-repository-url>
37+
cd <your-repository-name>/workspaces/sandbox
38+
yarn install
39+
```
40+
41+
This will install Playwright and other necessary packages.
42+
43+
### 2. Verify the Environment Configuration
44+
45+
Ensure that the `.env` file is properly configured with valid credentials and the base URL for the tests.
46+
47+
---
48+
49+
## Running the Tests
50+
51+
### 1. **Via Command Line (CLI)**
52+
53+
To run the tests via the command line, follow these steps:
54+
55+
- Open a terminal and navigate to the project directory.
56+
57+
- Run the Playwright tests using the `yarn` command:
58+
59+
```bash
60+
yarn playwright test
61+
```
62+
63+
This will execute all the tests defined in your project. If you want to run tests in a specific file or directory, you can specify the path:
64+
65+
```bash
66+
yarn playwright test <path-to-your-test-file>
67+
```
68+
69+
For example:
70+
71+
```bash
72+
yarn playwright test e2e-tests/app.test.ts
73+
```
74+
75+
### 2. **Run Tests in Headless Mode**
76+
77+
By default, Playwright runs tests in headless mode, which means it won't show the browser window. This is useful for continuous integration (CI) environments or when running tests in the background.
78+
79+
```bash
80+
yarn playwright test --headless
81+
```
82+
83+
### 3. **Run Tests in UI Mode (With Browser Window)**
84+
85+
If you want to see the tests run in the browser, enabling the UI mode will allow you to watch the tests as they happen.
86+
87+
To enable UI mode, run:
88+
89+
```bash
90+
yarn playwright test --headed
91+
```
92+
93+
This will launch the browser and display the tests running interactively.
94+
95+
### 4. **Run Tests with `--ui` Flag (Interactive Mode)**
96+
97+
You can also run the tests using Playwright's **interactive mode** (UI mode), which provides an interface to interact with the test runs.
98+
99+
When you use the **`--ui`** flag:
100+
101+
- Playwright will launch an **interactive interface**.
102+
- You can **see the individual steps of the test run**.
103+
- You can **pause, step forward**, or **retry tests manually** through the UI.
104+
- This mode is excellent for **debugging tests**, as you can visually inspect what’s going wrong during test execution.
105+
106+
To run tests in **interactive UI mode**:
107+
108+
```bash
109+
yarn playwright test --ui
110+
```
111+
112+
For running tests on specific browsers in UI mode:
113+
114+
- For **Chromium**:
115+
116+
```bash
117+
yarn playwright test --project=chromium --ui
118+
```
119+
120+
- For **Firefox**:
121+
122+
```bash
123+
yarn playwright test --project=firefox --ui
124+
```
125+
126+
- For **WebKit**:
127+
128+
```bash
129+
yarn playwright test --project=webkit --ui
130+
```
131+
132+
---
133+
134+
## Playwright Test Runner (Playwright Extension)
135+
136+
You can also run tests directly from your browser using the **Playwright extension** for Visual Studio Code (VS Code).
137+
138+
### Steps to Use Playwright Extension in VS Code
139+
140+
1. **Install Playwright Test Extension**:
141+
142+
- Open VS Code.
143+
- Go to the Extensions Marketplace and search for "Playwright Test".
144+
- Install the extension by Microsoft.
145+
146+
2. **Run Tests**:
147+
148+
- Open the test file (`app.test.ts`).
149+
- Use the **Playwright Test** extension to run individual tests directly from the editor.
150+
151+
---
152+
153+
## Test File Structure
154+
155+
The test file you provided follows a structured approach with:
156+
157+
1. **Before All Hook (`beforeAll`)**: This sets up the browser context and performs the login functionality using credentials from the `.env` file.
158+
2. **Test for Homepage**: Verifies that the homepage contains the expected layout and text content.
159+
3. **Test for OpenShift Card Interaction**: Ensures the OpenShift card functionality works, including clicking the "Try it" button and verifying the resulting content.
160+
4. **Test for Activities Page**: Verifies the activities page and interacts with the articles listed on the page, opening each article in a popup.
161+
162+
---
163+
164+
## Running in CI (Continuous Integration)
165+
166+
To run Playwright tests in a CI environment, you can add the following scripts to your `package.json`:
167+
168+
```json
169+
{
170+
"scripts": {
171+
"tests": "playwright test",
172+
"test:ui": "playwright test --ui",
173+
"test:headless": "playwright test --headless",
174+
"test:headed": "playwright test --headed",
175+
"test:debug": "playwright test --debug",
176+
"test:chromium": "playwright test --project=chromium",
177+
"test:firefox": "playwright test --project=firefox",
178+
"test:webkit": "playwright test --project=webkit"
179+
}
180+
}
181+
```
182+
183+
Then, you can run the tests by simply running the following commands:
184+
185+
```bash
186+
yarn tests
187+
yarn test:headless
188+
yarn test:debug
189+
yarn test:ui
190+
yarn test:headed
191+
yarn test:chromium
192+
yarn test:firefox
193+
yarn test:webkit
194+
```
195+
196+
---
197+
198+
## Additional Information
199+
200+
- **Playwright Documentation**: [Playwright Docs](https://playwright.dev/)
201+
- **Debugging Playwright Tests**: [Debugging Guide](https://playwright.dev/docs/debug)
202+
203+
---

‎workspaces/sandbox/packages/app/e2e-tests/Utils/loginPage.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
import { expect, type Locator, type Page } from '@playwright/test';
17+
18+
export class LoginPage {
19+
readonly page: Page;
20+
readonly loginId: string;
21+
readonly loginPw: string;
22+
readonly loginIdLoc: Locator;
23+
readonly nextBtn: Locator;
24+
readonly loginPwLoc: Locator;
25+
readonly tocList: Locator;
26+
readonly loginBtn: Locator;
27+
readonly header: Locator;
28+
29+
constructor(page: Page, environment: string) {
30+
this.page = page;
31+
32+
if (environment === 'dev') {
33+
this.loginIdLoc = page.getByRole('textbox', {
34+
name: 'Red Hat login or email',
35+
});
36+
this.loginPwLoc = page.getByRole('textbox', { name: 'Password' });
37+
this.nextBtn = page.getByRole('button', { name: 'Next' });
38+
this.loginBtn = page.getByRole('button', { name: 'Log in' });
39+
} else if (environment === 'e2e-tests') {
40+
this.loginIdLoc = page.getByRole('textbox', {
41+
name: 'Username or email',
42+
});
43+
this.loginPwLoc = page.getByRole('textbox', { name: 'Password' });
44+
this.loginBtn = page.getByRole('button', { name: 'Sign in' });
45+
}
46+
47+
this.header = page.locator('header');
48+
}
49+
50+
async navigate(url: string) {
51+
await this.page.goto(url);
52+
}
53+
54+
async login(login_id: string, login_pw: string, environment: string) {
55+
await this.loginIdLoc.fill(login_id);
56+
if (environment === 'dev') {
57+
await this.nextBtn.click();
58+
}
59+
await this.loginPwLoc.fill(login_pw);
60+
await this.loginBtn.click();
61+
// Verify header contains expected text
62+
await expect(this.header).toContainText('Developer Sandbox');
63+
}
64+
}

0 commit comments

Comments
 (0)