feat: up to date docs screenshots with playwright #36297
Draft
+97
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
This PR includes new functionality to run a suite of tests using Playwright in order to take screenshots of the UI so that the docs will have up to date screenshots.
The first changes made are to the
playwright.config.tsalong with a new fileauth.setup.ts. Using these two files, I defined two new projects so that our tests do not need to go through the login screen every time. For the authentication setup, I just hard coded the default admin/admin login as I was not sure if there is an env variable to handle this. The authentication is then stored in\superset\superset-frontend\playwright\.auth, which was also added to the.gitignore. Then our second project from the config file is set to depend on the auth file, so it is always run before our project. In addition, I set atestMatchandtestIgnoreproperty, so that only these tests will use the authentication, and the already existing E2E tests will still have the functionality to test login.The 'tests' that take the screenshots are written in
\superset\superset-frontend\playwright\tests\docs\docs-screenshots.spec.ts. Each test navigates to the content I want to screenshot, sometimes may zoom out for a nicer screenshot, then will wait a a few seconds to ensure the page has fully loaded, then finally will take a screenshot as a JPEG and save it to\superset\docs\static\img\screenshotsfolder.The tests try to use locators that are easy to read/understand, and are resilient to changes. For example, instead of using a CSS path, I try to locate a combobox with some name property. I used the non-development environment for these screenshots. It also seemed like some of the locators didn't exist in the development version of Superset. Please do note that if there are major UI overhauls, it is likely that these tests will have to be re-written.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
N/A
TESTING INSTRUCTIONS
Aside from verifying the files exist at the paths mentioned earlier, you can run the tests by using the command
npx playwright test --project=chromium-authenticatedin the superset-frontend directory.ADDITIONAL INFORMATION