* Move to new route * Convert to tailwind * Basic style * Add userStore * nit * nit * nit * Remove app.#setUser * Route to user-select view * Mock login * Use primevue UI components * handle create new user * Remove legacy user selection * Add logout button on side toolbar * Add username to logout button tooltip * Add playwright tests * hide logout button in single user server * nit
Playwright Testing for ComfyUI_frontend
This document outlines the setup and usage of Playwright for testing the ComfyUI_frontend project.
WARNING
The browser tests will change the ComfyUI backend state, such as user settings and saved workflows.
If TEST_COMFYUI_DIR in .env isn't set to your (Comfy Path)/ComfyUI directory, these changes won't be automatically restored.
Setup
Clone https://github.com/Comfy-Org/ComfyUI_devtools to your custom_nodes directory.
ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing.
Ensure you have Node.js v20 or later installed. Then, set up the Chromium test driver:
npx playwright install chromium --with-deps
Running Tests
There are two ways to run the tests:
-
Headless mode with report generation:
npx playwright testThis runs all tests without a visible browser and generates a comprehensive test report.
-
UI mode for interactive testing:
npx playwright test --uiThis opens a user interface where you can select specific tests to run and inspect the test execution timeline.
Screenshot Expectations
Due to variations in system font rendering, screenshot expectations are platform-specific. Please note:
- We maintain Linux screenshot expectations as our GitHub Action runner operates in a Linux environment.
- To set new test expectations:
- Create a pull request from a
Comfy-Org/ComfyUI_frontendbranch. - Add the
New Browser Test Expectationtag to your pull request. - This will trigger a GitHub action to update the screenshot expectations automatically.
- Create a pull request from a
Note: If you're making a pull request from a forked repository, the GitHub action won't be able to commit updated screenshot expectations directly to your PR branch.