Add Playwright E2E testing framework to Karmada Dashboard #243

SunsetB612 · 2025-08-06T15:51:38Z

Summary

Add Playwright E2E testing framework to Karmada Dashboard

What's Added

Basic Playwright configuration for E2E testing
Login page test as foundation for future test coverage
NPM scripts for running E2E tests

Why This Change

Establishes automated testing foundation for UI stability
Enables regression testing during development
Provides framework for testing critical user workflows

Test Coverage

Login page loads and renders correctly
Full authentication flow (ready for expansion)

Usage

pnpm test:e2e        # headless mode
pnpm test:e2e:headed # with browser UI

gemini-code-assist

Summary of Changes

Hello @SunsetB612, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces the Playwright E2E testing framework to the Karmada Dashboard. Its primary goal is to establish an automated testing foundation for UI stability, enable regression testing, and provide a framework for testing critical user workflows, starting with the login page. This will allow for more reliable and automated verification of the dashboard's user interface.

Highlights

Playwright Integration: The Playwright E2E testing framework has been added to the Karmada Dashboard project.
Initial E2E Test: A foundational E2E test for the login page has been implemented, verifying that the login page loads and the "Sign in" text is visible.
NPM Scripts for Testing: New pnpm test:e2e and pnpm test:e2e:headed scripts have been added to package.json for easily running E2E tests in headless or headed modes.
Testability Enhancements: data-testid attributes were added to the login input and button components in src/pages/login/index.tsx to facilitate robust E2E test automation.
Configuration and Dependencies: Necessary Playwright configuration (playwright.config.ts) and dependencies have been added, along with updates to .gitignore and tsconfig.json to accommodate the new testing setup.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces Playwright for end-to-end testing of the Karmada Dashboard, which is a great step towards ensuring UI stability. The setup includes the necessary configuration, dependencies, and a foundational test for the login page. The changes are well-structured. My feedback focuses on improving the reliability of the tests by avoiding hardcoded waits, which is a common pitfall in E2E testing and can lead to flaky tests.

gemini-code-assist · 2025-08-06T15:53:04Z

ui/apps/dashboard/e2e/login.spec.ts

+  // Navigate to the home page
+  await page.goto('/');
+
+  await page.waitForTimeout(2 * 1000);


Using waitForTimeout is generally discouraged in Playwright tests as it can lead to flakiness and slow down test execution. It introduces an arbitrary wait time. Playwright's auto-waiting mechanism is more reliable. The subsequent assertion await expect(page.getByText('Sign in')).toBeVisible() already waits for the element to appear, making this explicit wait redundant. It can be safely removed.

it's ok for our test-case

warjiang · 2025-08-06T15:53:39Z

/assign

warjiang · 2025-08-06T16:06:27Z

.github/workflows/ci.yml

+        with:
+          name: playwright-report-${{ matrix.k8s }}
+          path: karmada-dashboard/ui/apps/dashboard/playwright-report/
+          retention-days: 30


plz add extra new line to fix format problem~

This problem have been solved.

Hi @SunsetB612, for comments that have been confirmed and resolved, they can be closed to facilitate viewing.

warjiang · 2025-08-06T16:06:48Z

ui/apps/dashboard/e2e/login.spec.ts

+  // Navigate to the home page
+  await page.goto('/');
+
+  await page.waitForTimeout(2 * 1000);


it's ok for our test-case

warjiang · 2025-08-06T16:07:12Z

ui/apps/dashboard/package.json

-    "i18n:scan": "i18n-tool scan"
+    "i18n:scan": "i18n-tool scan",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"


👍 good job

warjiang · 2025-08-06T16:08:43Z

@SunsetB612 there is only one format problem. And the e2e test jobs work out for the latest three version of kubernetes, cool~

warjiang · 2025-08-06T16:29:59Z

@SunsetB612 one more thing
the commit seems already been squashed, but it contains two commits and two lines of sign, would you mind re-edit the commit msg to remove the duplicate sign and re-push it ?

SunsetB612 · 2025-08-06T16:46:34Z

@SunsetB612 one more thing the commit seems already been squashed, but it contains two commits and two lines of sign, would you mind re-edit the commit msg to remove the duplicate sign and re-push it ?

Ok, I've updated the commit message to remove the duplicate sign-off~

warjiang · 2025-08-07T09:37:02Z

@SunsetB612 one more thing the commit seems already been squashed, but it contains two commits and two lines of sign, would you mind re-edit the commit msg to remove the duplicate sign and re-push it ?

Ok, I've updated the commit message to remove the duplicate sign-off~

the commit seems no changes, did you push the branch ?

Co-authored-by: warjiang <[email protected]> Signed-off-by: SunsetB612 <[email protected]>

warjiang · 2025-08-07T17:26:55Z

/lgtm
/approve

karmada-bot · 2025-08-07T17:27:04Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: warjiang

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [warjiang]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

warjiang · 2025-08-07T17:27:35Z

@SunsetB612 thanks for your hardwork ❤️

karmada-bot requested review from devadapter and warjiang August 6, 2025 15:51

karmada-bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Aug 6, 2025

gemini-code-assist bot reviewed Aug 6, 2025

View reviewed changes

karmada-bot assigned warjiang Aug 6, 2025

warjiang reviewed Aug 6, 2025

View reviewed changes

SunsetB612 force-pushed the add-e2e-fabric3 branch from eb8520c to 1ebb96b Compare August 6, 2025 16:24

SunsetB612 force-pushed the add-e2e-fabric3 branch 2 times, most recently from b004895 to b8d04cb Compare August 7, 2025 16:53

ci(e2e): add frontend e2e workflow

20eca20

Co-authored-by: warjiang <[email protected]> Signed-off-by: SunsetB612 <[email protected]>

SunsetB612 force-pushed the add-e2e-fabric3 branch from b8d04cb to 20eca20 Compare August 7, 2025 17:10

karmada-bot added the lgtm Indicates that a PR is ready to be merged. label Aug 7, 2025

karmada-bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Aug 7, 2025

karmada-bot merged commit 5f84a6d into karmada-io:main Aug 7, 2025
10 checks passed

XiShanYongYe-Chang mentioned this pull request Sep 10, 2025

[Summer OSPP 2025] Introduce E2E for the Karmada Dashboard #261

Closed

18 tasks

Add Playwright E2E testing framework to Karmada Dashboard #243

Add Playwright E2E testing framework to Karmada Dashboard #243

Uh oh!

Conversation

SunsetB612 commented Aug 6, 2025

Summary

What's Added

Why This Change

Test Coverage

Usage

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

warjiang Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

warjiang commented Aug 6, 2025

Uh oh!

warjiang Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

SunsetB612 Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

XiShanYongYe-Chang Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

warjiang Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

warjiang Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

warjiang commented Aug 6, 2025

Uh oh!

warjiang commented Aug 6, 2025

Uh oh!

SunsetB612 commented Aug 6, 2025

Uh oh!

warjiang commented Aug 7, 2025

Uh oh!

warjiang commented Aug 7, 2025

Uh oh!

karmada-bot commented Aug 7, 2025

Uh oh!

warjiang commented Aug 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants