feat: setup Playwright e2e test including vFolder create/delete test #2647

yomybaby · 2024-08-20T10:19:01Z

Note

This PR is newly written referring to #2115

TL;DR

Added end-to-end testing setup using Playwright

What changed?

Installed Playwright as a dev dependency
Added Playwright configuration file (playwright.config.ts)
Created initial end-to-end tests for login functionality and virtual folder operations
Updated .gitignore to exclude Playwright-related files and directories
Added a data-testid attribute to the user dropdown button for easier test selection

How to test?

Install dependencies: pnpm install
Run the application locally
Execute the tests: npx playwright test
View the test results in the console or generated HTML report

Why make this change?

Implementing end-to-end tests helps ensure the application's critical paths function correctly from a user's perspective. This addition will improve the overall quality and reliability of the project by catching potential issues early in the development process and providing confidence during future changes or refactoring.

graphite-app · 2024-08-20T10:19:06Z

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

yomybaby · 2024-08-20T10:19:20Z

feat: setup Playwright e2e test including vFolder create/delete test #2647 👈
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @yomybaby and the rest of your teammates on Graphite

github-actions · 2024-08-20T10:20:31Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	3.7%	215/5807
🔴	Branches	4.05%	159/3926
🔴	Functions	2.24%	43/1920
🔴	Lines	3.59%	204/5688

Test suite run success

71 tests passing in 7 suites.

Report generated by 🧪jest coverage report action from 7f61052

gahyuun

Is the command to execute test “npx playwright test” instead of “pnpm exec playwright test”?

gahyuun · 2024-08-21T02:54:59Z

e2e/agent.test.ts

@@ -0,0 +1,47 @@
+import { test, expect } from "@playwright/test";


Parsing error: ESLint was configured to run on <tsconfigRootDir>/e2e/agent.test.ts using
I get the above error in all test files
In the tsconfig.json file, it looks like the e2e folder should be included in the include

You can see this error only in VSCode, right? This doesn't affect the running e2e test. If you can resolve this issue, please make a PR.

gahyuun · 2024-08-21T02:57:00Z

e2e/test-util.ts

+}
+
+export async function loginAsAdmin(page: Page) {
+  await login(page, "[email protected]", "wJalrXUt", "http://127.0.0.1:8090");


Wouldn't it be better to separate the endpoint or Id into a variable?
It would be inconvenient when setting the endpoint as test server.

Yes, it's better to manage a web server endpoint and web UI endpoint as well. But for now, it's better to keep now , and handle it later when we set up multiple Playwright configurations.

gahyuun · 2024-08-21T02:58:27Z

e2e/test-util.ts

+  await page.goto(url.toString());
+}
+
+export async function createVFolderAndVerify(page: Page, folderName: string) {


Why does this function exist in test-util.ts and not in VFolder.test.ts?

When we write some test code which include a create vfolder such as model serving, this function clould be helpful. It's like a login function.

gahyuun · 2024-08-21T03:03:33Z

e2e/vfolder.test.ts

vfolder test fails.

Could you let me know about the details of the failed test?

This error occurs. I think Playwright can't seem to find the add button. Is this error only happening to me?

"Error: locator.click: Test timeout of 30000ms exceeded. Call log: - waiting for getByRole('button', { name: 'plus Add' })"

tests-examples/demo-todo-app.spec.ts

graphite-app · 2024-08-22T11:32:15Z

Merge activity

Aug 22, 7:32 AM EDT: yomybaby added this pull request to the Graphite merge queue.
Aug 22, 7:34 AM EDT: yomybaby merged this pull request with the Graphite merge queue.

…2647) > [!NOTE] > This PR is newly written referring to #2115 ### TL;DR Added end-to-end testing setup using Playwright ### What changed? - Installed Playwright as a dev dependency - Added Playwright configuration file (playwright.config.ts) - Created initial end-to-end tests for login functionality and virtual folder operations - Updated .gitignore to exclude Playwright-related files and directories - Added a data-testid attribute to the user dropdown button for easier test selection ### How to test? 1. Install dependencies: `pnpm install` 2. Run the application locally 3. Execute the tests: `npx playwright test` 4. View the test results in the console or generated HTML report ### Why make this change? Implementing end-to-end tests helps ensure the application's critical paths function correctly from a user's perspective. This addition will improve the overall quality and reliability of the project by catching potential issues early in the development process and providing confidence during future changes or refactoring.

github-actions bot added the size:XL 500~ LoC label Aug 20, 2024

github-actions bot assigned yomybaby Aug 20, 2024

yomybaby requested review from gahyuun and agatha197 August 21, 2024 01:34

yomybaby marked this pull request as ready for review August 21, 2024 01:37

yomybaby mentioned this pull request Aug 21, 2024

feat: E2E test using Playwright #2115

Closed

6 tasks

yomybaby force-pushed the feature/setup-e2e-playwright branch 2 times, most recently from e4799e3 to 36eb42b Compare August 21, 2024 02:33

gahyuun reviewed Aug 21, 2024

View reviewed changes

tests-examples/demo-todo-app.spec.ts Outdated Show resolved Hide resolved

yomybaby force-pushed the feature/setup-e2e-playwright branch from 36eb42b to ea2fa94 Compare August 22, 2024 06:49

yomybaby requested a review from gahyuun August 22, 2024 06:49

github-actions bot added size:L 100~500 LoC and removed size:XL 500~ LoC labels Aug 22, 2024

gahyuun approved these changes Aug 22, 2024

View reviewed changes

yomybaby force-pushed the feature/setup-e2e-playwright branch 3 times, most recently from fe6a669 to e81d867 Compare August 22, 2024 10:30

yomybaby force-pushed the feature/setup-e2e-playwright branch from e81d867 to 7f61052 Compare August 22, 2024 11:32

graphite-app bot merged commit 7f61052 into main Aug 22, 2024
7 checks passed

graphite-app bot deleted the feature/setup-e2e-playwright branch August 22, 2024 11:34

github-pages bot temporarily deployed to github-pages August 22, 2024 11:34 Inactive

yomybaby mentioned this pull request Nov 6, 2024

Let's implement E2E test using playwright #2081

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: setup Playwright e2e test including vFolder create/delete test #2647

feat: setup Playwright e2e test including vFolder create/delete test #2647

yomybaby commented Aug 20, 2024 •

edited

Loading

graphite-app bot commented Aug 20, 2024

yomybaby commented Aug 20, 2024

github-actions bot commented Aug 20, 2024 •

edited

Loading

gahyuun left a comment

gahyuun Aug 21, 2024

yomybaby Aug 22, 2024

gahyuun Aug 21, 2024

yomybaby Aug 22, 2024

gahyuun Aug 21, 2024

yomybaby Aug 22, 2024

gahyuun Aug 21, 2024

yomybaby Aug 22, 2024

gahyuun Aug 22, 2024

graphite-app bot commented Aug 22, 2024 •

edited

Loading

		@@ -0,0 +1,47 @@
		import { test, expect } from "@playwright/test";

feat: setup Playwright e2e test including vFolder create/delete test #2647

feat: setup Playwright e2e test including vFolder create/delete test #2647

Conversation

yomybaby commented Aug 20, 2024 • edited Loading

TL;DR

What changed?

How to test?

Why make this change?

graphite-app bot commented Aug 20, 2024

Your org requires the Graphite merge queue for merging into main

yomybaby commented Aug 20, 2024

github-actions bot commented Aug 20, 2024 • edited Loading

Coverage report for ./react

Test suite run success

gahyuun left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

graphite-app bot commented Aug 22, 2024 • edited Loading

Merge activity

yomybaby commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Aug 20, 2024 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Aug 22, 2024 •

edited

Loading