fix(addon-mobile): virtual-scroll flickers during scroll in zoneless mode #11081

Workflow file for this run

	name: ⚙️ E2E testing
	on:
	pull_request:

	env:
	RETRY_COUNT: 2

	jobs:
	build-demo:
	if: ${{ !contains(github.head_ref , 'release/') }}
	name: Build demo
	runs-on: ubuntu-latest
	steps:
	- uses: actions/[email protected]
	with:
	fetch-depth: 10
	- uses: taiga-family/ci/actions/setup/[email protected]
	- uses: taiga-family/ci/actions/run/[email protected]
	continue-on-error: true
	- uses: taiga-family/ci/actions/setup/[email protected]

	- run: npx nx type-check demo-playwright
	- name: Building demo-app of git-branch without cache
	run: npx nx build demo # Don't use prerender please, because it's flaky for e2e

	- name: Upload cache / ${{ env.CACHE_DIST_KEY }}
	uses: actions/cache/[email protected]
	with:
	path: dist/demo
	key: ${{ env.CACHE_DIST_KEY }}

	cypress:
	runs-on: ubuntu-latest
	name: Cypress / Component Testing
	env:
	CYPRESS_BASELINE_REPO: 'baseline'
	CYPRESS_RESULTS_FOLDER: 'projects/demo-cypress/tests-results'
	CYPRESS_BASELINE_SNAPSHOTS: 'projects/demo-cypress/tests-results/snapshots/baseline'
	CYPRESS_BASELINE_SNAPSHOTS_KEY: 'cy_baseline_${{ github.event.pull_request.head.sha }}'
	steps:
	- uses: actions/[email protected]
	with:
	ref: ${{ github.base_ref }}
	- uses: taiga-family/ci/actions/setup/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]

	- name: Run tests for baseline state
	run: npx nx component-test demo-cypress

	- name: Save Cypress Baseline Snapshots
	uses: actions/[email protected]
	with:
	path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
	name: ${{env.CYPRESS_BASELINE_SNAPSHOTS_KEY}}
	if-no-files-found: ignore
	compression-level: 0
	retention-days: 1

	- uses: actions/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]

	- name: Download Cypress Baseline Snapshots
	uses: actions/[email protected]
	with:
	path: ${{env.CYPRESS_BASELINE_SNAPSHOTS}}
	pattern: ${{ env.CYPRESS_BASELINE_SNAPSHOTS_KEY }}
	merge-multiple: true

	- name: Run tests for current state
	run: npx nx component-test demo-cypress

	- name: Prepare diff screenshots
	run: \|
	npm install canvas
	npx ts-node ./scripts/visual-testing/combine-cypress-failed-screenshots.ts

	- name: Debug output
	continue-on-error: true
	run: tree ${{ env.CYPRESS_RESULTS_FOLDER }} -L 1

	- name: Upload artifacts
	uses: actions/[email protected]
	with:
	path: '${{ env.CYPRESS_RESULTS_FOLDER }}/*/.diff.png'
	name: ${{ env.CYPRESS_SNAPSHOTS_ARTIFACTS_KEY }}
	if-no-files-found: ignore
	compression-level: 0
	retention-days: 1

	playwright:
	if: ${{ !contains(github.head_ref , 'release/') }}
	needs: [build-demo]
	strategy:
	fail-fast: false
	matrix:
	shard: [
	# Safari
	{index: 1, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 2, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 3, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 4, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 5, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 6, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 7, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 8, os: 'macos-latest', project: 'webkit', total: 9},
	{index: 9, os: 'macos-latest', project: 'webkit', total: 9},
	# Chrome
	{index: 1, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 2, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 3, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 4, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 5, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 6, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 7, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 8, os: 'ubuntu-latest', project: 'chromium', total: 9},
	{index: 9, os: 'ubuntu-latest', project: 'chromium', total: 9},
	]
	name: Playwright / ${{ matrix.shard.os }} / ${{ matrix.shard.index }} of ${{ matrix.shard.total }}
	runs-on: ${{ matrix.shard.os }}
	steps:
	- uses: actions/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]

	- name: Mac OS X building all dependencies
	if: ${{ contains( matrix.shard.os, 'macos') }}
	run: brew install pkg-config cairo pango libpng jpeg-turbo giflib librsvg --force \|\| echo ''

	- uses: taiga-family/ci/actions/setup/[email protected]

	- name: Get installed Playwright version
	id: playwright-version
	run: \|
	echo "PLAYWRIGHT_VERSION=$(node -p 'require("./projects/demo-playwright/package.json").devDependencies["@playwright/test"]')" >> $GITHUB_ENV

	- uses: actions/cache/[email protected]
	id: playwright-cache
	with:
	path: \|
	~/Library/Caches/ms-playwright
	~/.cache/ms-playwright
	**/node_modules/playwright
	key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
	- run: npx playwright install --with-deps
	if: steps.playwright-cache.outputs.cache-hit != 'true'
	- run: npx playwright install-deps
	if: steps.playwright-cache.outputs.cache-hit != 'true'

	- name: Download cache / ${{ env.CACHE_DIST_KEY }}
	uses: actions/cache/[email protected]
	with:
	path: dist/demo
	key: ${{ env.CACHE_DIST_KEY }}

	- uses: taiga-family/ci/actions/run/[email protected]
	with:
	port: ${{ env.NG_SERVER_PORT }}
	directory: ${{ env.DIST }}
	replaceBaseUrl: false

	- name: Run screenshot tests on ${{ env.DIST }}
	run: \|
	npx nx e2e demo-playwright -- \
	--update-snapshots \
	--project=${{ matrix.shard.project }} \
	--shard=${{ matrix.shard.index }}/${{ matrix.shard.total }}

	- uses: taiga-family/ci/actions/run/[email protected]
	with:
	branch: snapshots/demo/next/${{ github.base_ref }}
	destination: ${{ env.DIST_NEXT }}

	- uses: taiga-family/ci/actions/run/[email protected]
	with:
	port: ${{ env.NG_SERVER_PORT }}
	directory: ${{ env.DIST_NEXT }}
	replaceBaseUrl: false

	- name: Run screenshot tests on ${{ env.DIST_NEXT }}
	continue-on-error: true
	run: \|
	npx nx e2e demo-playwright -- \
	--project=${{ matrix.shard.project }} \
	--shard=${{ matrix.shard.index }}/${{ matrix.shard.total }}

	- name: Combine images to get diff reports
	run: \|
	npm install canvas --no-save --silent
	npm view canvas version
	npx ts-node ./scripts/visual-testing/combine-playwright-failed-screenshots.ts

	- name: Upload artifacts / ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}
	uses: actions/[email protected]
	with:
	path: ./projects/demo-playwright/tests-results/*/-retry${{ env.RETRY_COUNT }}/*/.diff.png
	name: ${{ env.PLAYWRIGHT_SNAPSHOTS_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
	if-no-files-found: ignore
	compression-level: 0
	retention-days: 1

	- name: Upload reports / ${{ env.PLAYWRIGHT_BLOB_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
	uses: actions/[email protected]
	with:
	path: ./projects/demo-playwright/blob-report
	name: ${{ env.PLAYWRIGHT_BLOB_ARTIFACTS_KEY }}_${{ matrix.shard.index }}
	compression-level: 0
	retention-days: 1

	# workaround for status checks -- check this one job instead of each individual E2E job in the matrix
	# see https://github.com/orgs/community/discussions/9141#discussioncomment-2296809
	playwright-composite-result:
	name: Playwright E2E Tests matrix result
	if: ${{ always() }}
	needs: [playwright]
	runs-on: ubuntu-latest
	steps:
	- run: \|
	result="${{ needs.playwright.result }}"
	# mark as successful even if skipped
	if [[ $result == "success" \|\| $result == "skipped" ]]; then
	exit 0
	else
	exit 1
	fi

	result:
	if: ${{ !contains(github.head_ref , 'release/') }}
	name: E2E result
	needs: [playwright, cypress]
	runs-on: ubuntu-latest
	steps:
	- uses: actions/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]
	- uses: taiga-family/ci/actions/setup/[email protected]

	- name: Download artifacts for Playwright
	continue-on-error: true
	uses: actions/[email protected]
	with:
	path: ./total/playwright
	pattern: playwright-snapshots-artifacts--*
	merge-multiple: true
	- run: ls -R ./total/playwright \|\| echo "not found"

	- name: Download artifacts for Cypress
	continue-on-error: true
	uses: actions/[email protected]
	with:
	path: ./total/cypress
	pattern: cypress-snapshots-artifacts--*
	merge-multiple: true
	- run: ls -R ./total/cypress \|\| echo "not found"

	- name: Download blob reports for Playwright
	continue-on-error: true
	uses: actions/[email protected]
	with:
	path: all-blob-reports
	pattern: playwright-blob-artifacts--*
	merge-multiple: true
	- run: ls -R ./all-blob-reports \|\| echo "not found"

	- name: Merge into HTML Report
	run: npx playwright merge-reports --config=projects/demo-playwright/merge.config.ts ./all-blob-reports

	- name: Deploy e2e report
	id: e2e-report
	uses: FirebaseExtended/[email protected]
	if: env.IS_OWNER_MODE == 'true'
	continue-on-error: true
	with:
	channelId: pr${{ github.event.number }}-${{ github.head_ref }}-e2e
	firebaseServiceAccount: ${{ secrets.FIREBASE_TAIGA_PREVIEWS_SA }}
	repoToken: ${{ secrets.GITHUB_TOKEN }}
	projectId: taiga-previews
	expires: 1d
	target: taiga-previews-demo-e2e-report
	disableComment: 'true'

	- name: Create report comment
	id: report-summary
	continue-on-error: true
	uses: daun/[email protected]
	with:
	comment-title: 'Playwright test results'
	report-file: ./all-blob-reports/results.json
	report-url: ${{ steps.e2e-report.outputs.details_url }}

	- name: Check if diff-output exists
	id: diff_checker
	run: \|
	echo "diff_exist=$(find ./total -iname '.diff.png' \| wc -l \| sed -e 's/^[[:space:]]//')" >> $GITHUB_OUTPUT

	- name: Fall with an error if diff-output exists
	if: ${{ steps.diff_checker.outputs.diff_exist != '0' }}
	run: \|
	find ./total -iname '*.diff.png' -exec echo "{}" \;
	exit 1

	concurrency:
	group: ${{ github.workflow }}-${{ github.ref }}
	cancel-in-progress: true

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(addon-mobile): virtual-scroll flickers during scroll in zoneless mode #11081

Workflow file

fix(addon-mobile): virtual-scroll flickers during scroll in zoneless mode #11081

Jobs

Run details

Workflow file for this run