openverse-frontend
openverse-frontend copied to clipboard
WordPress
Update the Playwright version
Description
This PR updates the Playwright version a newer one, 1.24. This will allow us to use HAR recordings introduced in version 1.23. We pin the version to prevent accidental test failure due to changes in browser versions, as is advised in Playwright docs.
There were some problems with visual regression tests for RTL in version 1.25, see comments for more details.
Testing Instructions
Playwright CI tests should pass.
Developer Certificate of Origin
Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1
Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129
Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.
Developer's Certificate of Origin 1.1
By making a contribution to this project, I certify that:
(a) The contribution was created in whole or in part by me and I
have the right to submit it under the open source license
indicated in the file; or
(b) The contribution is based upon previous work that, to the best
of my knowledge, is covered under an appropriate open source
license and I have the right under that license to submit that
work with modifications, whether created in whole or in part
by me, under the same open source license (unless I am
permitted to submit under a different license), as indicated
in the file; or
(c) The contribution was provided directly to me by some other
person who certified (a), (b) or (c) and I have not modified
it.
(d) I understand and agree that this project and the contribution
are public and that a record of the contribution (including all
personal information I submit with it, including my sign-off) is
maintained indefinitely and may be redistributed consistent with
this project or the open source license(s) involved.
Storybook and Tailwind configuration previews: Ready
Storybook: https://wordpress.github.io/openverse-frontend/_preview/1646 Tailwind: https://wordpress.github.io/openverse-frontend/_preview/1646/tailwind
Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.
You can check the GitHub pages deployment action list to see the current status of the deployments.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: -1.64 kB (0%)
Total Size: 767 kB
| Filename | Size | Change | |
|---|---|---|---|
./.nuxt/dist/client/235.js |
0 B | -273 B (removed) | đ |
./.nuxt/dist/client/235.modern.js |
0 B | -277 B (removed) | đ |
./.nuxt/dist/client/236.js |
0 B | -1.85 kB (removed) | đ |
./.nuxt/dist/client/app.js |
109 kB | -819 B (-1%) | |
./.nuxt/dist/client/app.modern.js |
102 kB | -754 B (-1%) | |
./.nuxt/dist/client/runtime.js |
2.67 kB | -33 B (-1%) | |
./.nuxt/dist/client/runtime.modern.js |
2.68 kB | -32 B (-1%) | |
./.nuxt/dist/client/228.js |
273 B | +273 B (new file) | đ |
./.nuxt/dist/client/228.modern.js |
277 B | +277 B (new file) | đ |
./.nuxt/dist/client/229.js |
1.85 kB | +1.85 kB (new file) | đ |
âšī¸ View Unchanged
| Filename | Size | Change |
|---|---|---|
./.nuxt/dist/client/commons/app.js |
87.8 kB | 0 B |
./.nuxt/dist/client/commons/app.modern.js |
76.7 kB | 0 B |
./.nuxt/dist/client/components/loading-icon.js |
746 B | 0 B |
./.nuxt/dist/client/components/loading-icon.modern.js |
751 B | 0 B |
./.nuxt/dist/client/components/table-sort-icon.js |
508 B | 0 B |
./.nuxt/dist/client/components/table-sort-icon.modern.js |
512 B | 0 B |
./.nuxt/dist/client/components/v-all-results-grid.js |
4.13 kB | 0 B |
./.nuxt/dist/client/components/v-all-results-grid.modern.js |
4.01 kB | 0 B |
./.nuxt/dist/client/components/v-audio-cell.js |
344 B | 0 B |
./.nuxt/dist/client/components/v-audio-cell.modern.js |
349 B | 0 B |
./.nuxt/dist/client/components/v-audio-details.js |
1.66 kB | 0 B |
./.nuxt/dist/client/components/v-audio-details.modern.js |
1.65 kB | 0 B |
./.nuxt/dist/client/components/v-audio-track-skeleton.js |
1.01 kB | 0 B |
./.nuxt/dist/client/components/v-audio-track-skeleton.modern.js |
1.02 kB | 0 B |
./.nuxt/dist/client/components/v-audio-track.js |
4.55 kB | 0 B |
./.nuxt/dist/client/components/v-audio-track.modern.js |
4.51 kB | 0 B |
./.nuxt/dist/client/components/v-back-to-search-results-link.js |
570 B | 0 B |
./.nuxt/dist/client/components/v-back-to-search-results-link.modern.js |
575 B | 0 B |
./.nuxt/dist/client/components/v-bone.js |
685 B | 0 B |
./.nuxt/dist/client/components/v-bone.modern.js |
690 B | 0 B |
./.nuxt/dist/client/components/v-box-layout.js |
1.19 kB | 0 B |
./.nuxt/dist/client/components/v-box-layout.modern.js |
1.19 kB | 0 B |
./.nuxt/dist/client/components/v-content-link.js |
1.06 kB | 0 B |
./.nuxt/dist/client/components/v-content-link.modern.js |
1.04 kB | 0 B |
./.nuxt/dist/client/components/v-content-page.js |
467 B | 0 B |
./.nuxt/dist/client/components/v-content-page.modern.js |
471 B | 0 B |
./.nuxt/dist/client/components/v-content-report-button.js |
763 B | 0 B |
./.nuxt/dist/client/components/v-content-report-button.modern.js |
773 B | 0 B |
./.nuxt/dist/client/components/v-content-report-form.js |
3.78 kB | 0 B |
./.nuxt/dist/client/components/v-content-report-form.modern.js |
3.59 kB | 0 B |
./.nuxt/dist/client/components/v-content-report-popover.js |
4.45 kB | 0 B |
./.nuxt/dist/client/components/v-content-report-popover.modern.js |
4.26 kB | 0 B |
./.nuxt/dist/client/components/v-copy-button.js |
3.97 kB | 0 B |
./.nuxt/dist/client/components/v-copy-button.modern.js |
3.98 kB | 0 B |
./.nuxt/dist/client/components/v-copy-license.js |
2.94 kB | 0 B |
./.nuxt/dist/client/components/v-copy-license.modern.js |
2.91 kB | 0 B |
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.js |
9.4 kB | 0 B |
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.modern.js |
9.38 kB | 0 B |
./.nuxt/dist/client/components/v-dmca-notice.js |
743 B | 0 B |
./.nuxt/dist/client/components/v-dmca-notice.modern.js |
753 B | 0 B |
./.nuxt/dist/client/components/v-error-image.js |
1.69 kB | 0 B |
./.nuxt/dist/client/components/v-error-image.modern.js |
1.68 kB | 0 B |
./.nuxt/dist/client/components/v-error-section.js |
372 B | 0 B |
./.nuxt/dist/client/components/v-error-section.modern.js |
375 B | 0 B |
./.nuxt/dist/client/components/v-full-layout.js |
1.55 kB | 0 B |
./.nuxt/dist/client/components/v-full-layout.modern.js |
1.55 kB | 0 B |
./.nuxt/dist/client/components/v-grid-skeleton.js |
1.61 kB | 0 B |
./.nuxt/dist/client/components/v-grid-skeleton.modern.js |
1.62 kB | 0 B |
./.nuxt/dist/client/components/v-image-cell-square.js |
1.01 kB | 0 B |
./.nuxt/dist/client/components/v-image-cell-square.modern.js |
1.02 kB | 0 B |
./.nuxt/dist/client/components/v-image-cell.js |
1.43 kB | 0 B |
./.nuxt/dist/client/components/v-image-cell.modern.js |
1.42 kB | 0 B |
./.nuxt/dist/client/components/v-image-details.js |
1.44 kB | 0 B |
./.nuxt/dist/client/components/v-image-details.modern.js |
1.43 kB | 0 B |
./.nuxt/dist/client/components/v-image-grid.js |
2.57 kB | 0 B |
./.nuxt/dist/client/components/v-image-grid.modern.js |
2.46 kB | 0 B |
./.nuxt/dist/client/components/v-license-tab-panel.js |
923 B | 0 B |
./.nuxt/dist/client/components/v-license-tab-panel.modern.js |
918 B | 0 B |
./.nuxt/dist/client/components/v-load-more.js |
815 B | 0 B |
./.nuxt/dist/client/components/v-load-more.modern.js |
714 B | 0 B |
./.nuxt/dist/client/components/v-media-license.js |
801 B | 0 B |
./.nuxt/dist/client/components/v-media-license.modern.js |
809 B | 0 B |
./.nuxt/dist/client/components/v-media-reuse.js |
1.03 kB | 0 B |
./.nuxt/dist/client/components/v-media-reuse.modern.js |
1.03 kB | 0 B |
./.nuxt/dist/client/components/v-media-reuse/pages/image/_id.js |
2.94 kB | 0 B |
./.nuxt/dist/client/components/v-media-reuse/pages/image/_id.modern.js |
2.91 kB | 0 B |
./.nuxt/dist/client/components/v-media-tag.js |
429 B | 0 B |
./.nuxt/dist/client/components/v-media-tag.modern.js |
433 B | 0 B |
./.nuxt/dist/client/components/v-meta-search-form.js |
2.7 kB | 0 B |
./.nuxt/dist/client/components/v-meta-search-form.modern.js |
2.66 kB | 0 B |
./.nuxt/dist/client/components/v-meta-source-list.js |
2.06 kB | 0 B |
./.nuxt/dist/client/components/v-meta-source-list.modern.js |
2.02 kB | 0 B |
./.nuxt/dist/client/components/v-modal.js |
875 B | 0 B |
./.nuxt/dist/client/components/v-modal.modern.js |
877 B | +1 B (0%) |
./.nuxt/dist/client/components/v-no-results.js |
2.27 kB | 0 B |
./.nuxt/dist/client/components/v-no-results.modern.js |
2.23 kB | 0 B |
./.nuxt/dist/client/components/v-radio.js |
1.51 kB | 0 B |
./.nuxt/dist/client/components/v-radio.modern.js |
1.47 kB | 0 B |
./.nuxt/dist/client/components/v-related-audio.js |
1.23 kB | 0 B |
./.nuxt/dist/client/components/v-related-audio.modern.js |
1.24 kB | 0 B |
./.nuxt/dist/client/components/v-related-images.js |
3.14 kB | 0 B |
./.nuxt/dist/client/components/v-related-images.modern.js |
3.02 kB | 0 B |
./.nuxt/dist/client/components/v-report-desc-form.js |
965 B | 0 B |
./.nuxt/dist/client/components/v-report-desc-form.modern.js |
964 B | 0 B |
./.nuxt/dist/client/components/v-row-layout.js |
1.72 kB | 0 B |
./.nuxt/dist/client/components/v-row-layout.modern.js |
1.73 kB | 0 B |
./.nuxt/dist/client/components/v-scroll-button.js |
804 B | 0 B |
./.nuxt/dist/client/components/v-scroll-button.modern.js |
809 B | 0 B |
./.nuxt/dist/client/components/v-search-grid.js |
5.06 kB | 0 B |
./.nuxt/dist/client/components/v-search-grid.modern.js |
4.99 kB | 0 B |
./.nuxt/dist/client/components/v-search-results-title.js |
673 B | 0 B |
./.nuxt/dist/client/components/v-search-results-title.modern.js |
666 B | 0 B |
./.nuxt/dist/client/components/v-search-type-radio.js |
831 B | 0 B |
./.nuxt/dist/client/components/v-search-type-radio.modern.js |
820 B | 0 B |
./.nuxt/dist/client/components/v-server-timeout.js |
298 B | 0 B |
./.nuxt/dist/client/components/v-server-timeout.modern.js |
303 B | 0 B |
./.nuxt/dist/client/components/v-sketch-fab-viewer.js |
991 B | 0 B |
./.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js |
892 B | 0 B |
./.nuxt/dist/client/components/v-skip-to-content-container.js |
888 B | 0 B |
./.nuxt/dist/client/components/v-skip-to-content-container.modern.js |
891 B | 0 B |
./.nuxt/dist/client/components/v-snackbar.js |
977 B | 0 B |
./.nuxt/dist/client/components/v-snackbar.modern.js |
982 B | -1 B (0%) |
./.nuxt/dist/client/components/v-sources-table.js |
14.3 kB | 0 B |
./.nuxt/dist/client/components/v-sources-table.modern.js |
14.3 kB | 0 B |
./.nuxt/dist/client/components/v-tab-panel.js |
689 B | 0 B |
./.nuxt/dist/client/components/v-tab-panel.modern.js |
683 B | 0 B |
./.nuxt/dist/client/components/v-tab.js |
1.73 kB | 0 B |
./.nuxt/dist/client/components/v-tab.modern.js |
1.71 kB | 0 B |
./.nuxt/dist/client/components/v-tabs.js |
779 B | 0 B |
./.nuxt/dist/client/components/v-tabs.modern.js |
766 B | 0 B |
./.nuxt/dist/client/components/v-warning-suppressor.js |
298 B | 0 B |
./.nuxt/dist/client/components/v-warning-suppressor.modern.js |
302 B | 0 B |
./.nuxt/dist/client/pages/about.js |
1.05 kB | -1 B (0%) |
./.nuxt/dist/client/pages/about.modern.js |
1.06 kB | -1 B (0%) |
./.nuxt/dist/client/pages/audio/_id.js |
6.42 kB | +1 B (0%) |
./.nuxt/dist/client/pages/audio/_id.modern.js |
6.26 kB | 0 B |
./.nuxt/dist/client/pages/feedback.js |
3.23 kB | +1 B (0%) |
./.nuxt/dist/client/pages/feedback.modern.js |
3.2 kB | 0 B |
./.nuxt/dist/client/pages/image/_id.js |
7.05 kB | +1 B (0%) |
./.nuxt/dist/client/pages/image/_id.modern.js |
6.83 kB | 0 B |
./.nuxt/dist/client/pages/index.js |
5.09 kB | 0 B |
./.nuxt/dist/client/pages/index.modern.js |
4.97 kB | -1 B (0%) |
./.nuxt/dist/client/pages/meta-search.js |
1.67 kB | 0 B |
./.nuxt/dist/client/pages/meta-search.modern.js |
1.68 kB | +3 B (0%) |
./.nuxt/dist/client/pages/preferences.js |
1.28 kB | 0 B |
./.nuxt/dist/client/pages/preferences.modern.js |
1.27 kB | 0 B |
./.nuxt/dist/client/pages/search-help.js |
1.55 kB | 0 B |
./.nuxt/dist/client/pages/search-help.modern.js |
1.55 kB | 0 B |
./.nuxt/dist/client/pages/search.js |
2.72 kB | 0 B |
./.nuxt/dist/client/pages/search.modern.js |
2.56 kB | -1 B (0%) |
./.nuxt/dist/client/pages/search/audio.js |
2.86 kB | -2 B (0%) |
./.nuxt/dist/client/pages/search/audio.modern.js |
2.75 kB | 0 B |
./.nuxt/dist/client/pages/search/image.js |
2.96 kB | 0 B |
./.nuxt/dist/client/pages/search/image.modern.js |
2.83 kB | 0 B |
./.nuxt/dist/client/pages/search/index.js |
815 B | 0 B |
./.nuxt/dist/client/pages/search/index.modern.js |
731 B | -1 B (0%) |
./.nuxt/dist/client/pages/search/model-3d.js |
242 B | 0 B |
./.nuxt/dist/client/pages/search/model-3d.modern.js |
246 B | 0 B |
./.nuxt/dist/client/pages/search/search-page.types.js |
266 B | 0 B |
./.nuxt/dist/client/pages/search/search-page.types.modern.js |
271 B | 0 B |
./.nuxt/dist/client/pages/search/video.js |
239 B | 0 B |
./.nuxt/dist/client/pages/search/video.modern.js |
243 B | -1 B (0%) |
./.nuxt/dist/client/pages/sources.js |
1.44 kB | 0 B |
./.nuxt/dist/client/pages/sources.modern.js |
1.45 kB | 0 B |
./.nuxt/dist/client/vendors/app.js |
47.8 kB | 0 B |
./.nuxt/dist/client/vendors/app.modern.js |
47.1 kB | 0 B |
Here's another cool feature added in 1.24:
https://playwright.dev/docs/release-notes#-component-tests-update
I don't know what's happening, but the node_modules seems to be not available in the Docker container. This prevents the container from running Playwright and talkback together. I wonder if it's related to the multistage build.
We don't use a multi-stage Dockerfile for playwright. We also don't explicitly copy node_modules into the container because we expect it to be mounted by docker-compose: https://github.com/WordPress/openverse-frontend/blob/c4a117a11ddda2d0085506c88284db43e2784223/docker-compose.playwright.yml#L10
Indeed, it does get properly mounted:
â openverse-frontend git:(update/vue) â USER_ID=$(id -u) docker-compose -f docker-compose.playwright.yml run playwright bash
pwuser@72718588e85e:/app# ls
CODE_OF_CONDUCT.md LICENSE ecosystem.config.js nuxt.config.ts tailwind.config.js typings
CONTRIBUTING.md README.md feat package.json tailwind.safelist.txt
DEPLOYMENT.md TESTING_GUIDELINES.md jest.config.js pnpm-lock.yaml test
Dockerfile bin node_modules prettier.config.js test-results
Dockerfile.playwright docker-compose.playwright.yml nuxt-template-overrides src tsconfig.json
pwuser@72718588e85e:/app# ls node_modules/.bin
acorn dot-object import-local-fixture nanoid run-s ts-node-transpile-only
ansi-html editorconfig is-ci nopt sane ts-script
ansi-to-html errno is-docker npm-run-all semver tsc
atob escodegen jest nuxt sentry-cli tsserver
autoprefixer esgenerate jest-runtime nuxt-cli sha.js uglifyjs
babylon eslint jiti nuxt-storybook sitemap uuid
browserslist eslint-config-prettier js-beautify nuxt-telemetry start-storybook vue-demi-fix
build-storybook esparse js-yaml opencollective storybook-server vue-demi-switch
color-support esvalidate jscodeshift opener svgo vue-i18n-extract
css-beautify flat jsesc parser tailwind vue-tsc
css-blank-pseudo glob-all json5 pidtree tailwind-config-viewer watch
css-has-pseudo handlebars lint-staged playwright tailwindcss webpack
css-prefers-color-scheme he loose-envify prettier tailwindcss-config-viewer webpack-bundle-analyzer
cssesc html-beautify lz-string regexp-tree terser which
default-browser-id html-minifier miller-rabin regjsparser ts-node x-default-browser
detect html-minifier-terser mime replace-in-file ts-node-cwd
detect-port husky mkdirp rimraf ts-node-esm
detective image-size mustache run-p ts-node-script
Even npm-run-all is there and has the correct permissions (owned by pwuser):
pwuser@72718588e85e:/app# ll ./node_modules/.bin | grep npm-run-all
-rwxr-xr-x 1 pwuser pwuser 556 Aug 24 17:08 npm-run-all*
I can even execute it just fine.
It turns out that Playwright at some point changed the execution context of the webserver command to be the same directory as the configuration file instead of the cwd from where Playwright was called.
Adding cwd: '/app', to the webServer configuration fixes the issue.
It turns out that Playwright at some point changed the execution context of the webserver command to be the same directory as the configuration file instead of the cwd from where Playwright was called.
I found the PR that changed the context: https://github.com/microsoft/playwright/pull/13626
I tried simply adding the cwd: '/app', but it didn't work.
It looks like the tests did run, there just appear to be a lot of visual regression failures. Could those come down to the change in browser version that accompanies a playwright upgrade? Maybe there was something else I missed in the logs?
@sarayourfriend, it seems that all of the test failures here are due to some differences in the Arabic texts, or the way they are rendered. You can see some NUL symbols on this snapshot, for example:
Interesting... I wonder if the fonts changed in the container's base image or something :thinking:
I tried other versions, and all up to 1.25 work well. You can see version 1.24 pass the CI with all the same setting, and v1.25 has lots of visualization regression failures. One more thing I noticed in v1.25 Docker container logs is "Running playwright: config file not found" when running the tests. Although it must have found it to run the tests...
I think we can keep the version updated to 1.24 in this PR, and invesigate newer versions later, as it's not such a high priority now.