apache
feat: up to date docs screenshots with playwright
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.ts along with a new file auth.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 a testMatch and testIgnore property, 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\screenshots folder.
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-authenticated in the superset-frontend directory.
ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in SIP-59)
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [x] Introduces new feature or API
- [ ] Removes existing feature or API
Looks like pre-commit needs to be run, and we have some licensing header failures on:
- superset-frontend/playwright/tests/auth.setup.ts
- superset-frontend/playwright/tests/docs/docs-screenshots.spec.ts
For the headers, you can copy/paste them from the top of other ts files. For the pre-commit stuff: Superset uses Git pre-commit hooks courtesy of pre-commit. To install run the following:
pip3 install -r requirements/development.txt
pre-commit install
A series of checks will now run when you make a git commit.
Alternatively it is possible to run pre-commit by running pre-commit manually:
pre-commit run --all-files
Thanks for the feedback, I added the licensing header to the top of the two files and also installed pre commit and used it for the commit to add the header.