283f59b479
* Fix YouTube preview shows Video Unavailable * Fix typo on iframe property * Remove duplicated property * fix lint error (double-quotes, unknown property) * renew snapshot for youtube_video.tsx * fix double quotes and newline error on snapshot for youtube_video.tsx * fix blank on snapshot for youtube_video.tsx * Add YouTube Shorts Embed Preview * Revert "Add YouTube Shorts Embed Preview" This reverts commit b5fb7a4076ef73774a0e50157f371516b9d383b2. * Add setting for Youtube Referrer Policy * fix test code error about Youtube Referrer Policy * remove mistake changes on `webpack.config.js` * add test and snapshot about `youtubeReferrerPolicy = true` * fix errors on ci * update description of YouTube Referrer Policy * remove unnecessary whitespace in default_config.ts * remove ko.json changes to prevent conflict with translate tool * update snapshot of `youtube_video.test.tsx` * referrerPolicy on `youtube_video` didn't follow global policy value https://github.com/mattermost/mattermost/pull/26980#discussion_r1672524152 * update snapshot of `youtube_video.test.tsx` * Remove obsolete snapshot * fix typo on index.ts @ youtube_video --------- Co-authored-by: Mattermost Build <build@mattermost.com> Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Local development
1. Start local server in a separate terminal.
# Typically run the local server with:
cd server && make run
# Or build and distribute webapp including channels and playbooks
# so that their product URLs do not rely on Webpack dev server.
# Especially important when running test inside the Playwright's docker container.
cd webapp && make dist
cd server && make run-server
2. Install dependencies and run the test.
Note: If you're using Node.js version 18 and above, you may need to set NODE_OPTIONS='--no-experimental-fetch'.
# Install npm packages
npm i
# Install browser binaries as prompted if Playwright is just installed or updated
# See https://playwright.dev/docs/browsers
npx playwright install
# Run specific test of all projects -- chrome, firefox, iphone and ipad.
# See https://playwright.dev/docs/test-cli.
npm run test -- login
# Run specific test of a project
npm run test -- login --project=chrome
# Or run all tests
npm run test
3. Inspect test results at /test-results folder when something failed unexpectedly.
Updating screenshots is strictly via Playwright's docker container for consistency
1. Run docker container using latest focal version
Change to root directory, run docker container
docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.43.0-jammy /bin/bash
2. Inside the docker container
export NODE_OPTIONS='--no-experimental-fetch'
export PW_BASE_URL=http://host.docker.internal:8065
export PW_HEADLESS=true
cd mattermost/e2e-tests/playwright
# Install npm packages. Use "npm ci" to match the automated environment
export PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm ci
# Run specific test. See https://playwright.dev/docs/test-cli.
npm run test -- login --project=chrome
# Or run all tests
npm run test
# Update snapshots
npm run test -- login --update-snapshots
Page/Component Object Model
See https://playwright.dev/docs/test-pom.
Page and component abstractions are located at ./support/ui. It should be first class before writing a spec file so that any future change in DOM structure will be done in one place only. No static UI text and fixed locator should be written in the spec file.