From 5c1afa2ccca2a3ae4c2184c1e3489e2525742e1d Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 18:54:47 +0100 Subject: [PATCH 1/7] chore: Add allure report --- .github/workflows/build-lint-test.yml | 10 + package-lock.json | 83 ++++++ package.json | 2 + test/compare-images.test.ts | 366 +++++++++++++------------- test/utils/global-setup.ts | 25 ++ vite.config.mts | 3 + 6 files changed, 308 insertions(+), 181 deletions(-) diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index af97aae..1568ea3 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -18,3 +18,13 @@ jobs: build: uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@main secrets: inherit + with: + artifact-path: build/allure-report + artifact-name: allure-report + deploy: + needs: build + uses: cloudscape-design/actions/.github/workflows/deploy.yml@main + secrets: inherit + with: + artifact-name: allure-report + deployment-path: build/allure-report diff --git a/package-lock.json b/package-lock.json index 5f7449a..7ccd330 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,8 @@ "@typescript-eslint/eslint-plugin": "^5.41.0", "@typescript-eslint/parser": "^5.41.0", "@vitest/coverage-istanbul": "^3.0.6", + "allure-commandline": "^2.32.2", + "allure-vitest": "^3.2.0", "eslint": "^8.26.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-header": "^3.1.1", @@ -3347,6 +3349,48 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/allure-commandline": { + "version": "2.32.2", + "resolved": "https://registry.npmjs.org/allure-commandline/-/allure-commandline-2.32.2.tgz", + "integrity": "sha512-+O+a4laukvO/jqWLV/PenQo4an9igZgo+TuAX10D+Do4K03EPyCcmxCel/EXp8NUMb3ExErrrozyX/0o6I8qbA==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "allure": "bin/allure" + } + }, + "node_modules/allure-js-commons": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/allure-js-commons/-/allure-js-commons-3.2.0.tgz", + "integrity": "sha512-UXRo3D6/XEIMosro+OldWj8phJ65eSOYaAUlThOpl6nJJ0sGngMpJYog+Z9FmZDo1BZn4edwLs4aAUaTgkz4Cg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "md5": "^2.3.0" + }, + "peerDependencies": { + "allure-playwright": "3.2.0" + }, + "peerDependenciesMeta": { + "allure-playwright": { + "optional": true + } + } + }, + "node_modules/allure-vitest": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/allure-vitest/-/allure-vitest-3.2.0.tgz", + "integrity": "sha512-bTJJYCAmTIxQfFxattLEuUqvk0n2QByFujSTOnkDAe2BcziwgyVRHM10BprOvZCrXzAitRlmR0H6rytuOkyncA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "allure-js-commons": "3.2.0" + }, + "peerDependencies": { + "@vitest/runner": ">=1.3.0", + "vitest": ">=1.3.0" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -3811,6 +3855,16 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": "*" + } + }, "node_modules/check-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", @@ -4102,6 +4156,16 @@ "node": ">= 8" } }, + "node_modules/crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": "*" + } + }, "node_modules/css-select": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", @@ -5958,6 +6022,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true, + "license": "MIT" + }, "node_modules/is-builtin-module": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.0.tgz", @@ -7005,6 +7076,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/md5": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz", + "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "charenc": "0.0.2", + "crypt": "0.0.2", + "is-buffer": "~1.1.6" + } + }, "node_modules/memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", diff --git a/package.json b/package.json index f72595f..c7e771b 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ "@typescript-eslint/eslint-plugin": "^5.41.0", "@typescript-eslint/parser": "^5.41.0", "@vitest/coverage-istanbul": "^3.0.6", + "allure-commandline": "^2.32.2", + "allure-vitest": "^3.2.0", "eslint": "^8.26.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-header": "^3.1.1", diff --git a/test/compare-images.test.ts b/test/compare-images.test.ts index 015eeba..794faa6 100644 --- a/test/compare-images.test.ts +++ b/test/compare-images.test.ts @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { test, expect } from 'vitest'; +import { test, expect, describe } from 'vitest'; import fs from 'fs'; import { PNG } from 'pngjs'; import useBrowser from '../src/use-browser'; @@ -18,193 +18,197 @@ function setupTest(testFn: TestFn) { }); } -test( - 'should detect an empty screenshot', - setupTest(async page => { - const result = await page.captureBySelector('#empty-box'); - await expect(cropAndCompare(result, result)).rejects.toThrow(/Image does not contain enough colors/); - }) -); - -test( - 'should compare two provided images directly', - setupTest(async (page, browser) => { - const firstResult = await page.captureBySelector('#box1'); - await browser.refresh(); - const secondResult = await page.captureBySelector('#box1'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: null, - diffPixels: 0, - isEqual: true, - }); - }) -); - -test( - 'should compare viewport screenshots', - setupTest(async (page, browser) => { - const firstResult = await page.captureViewport(); - await browser.refresh(); - const secondResult = await page.captureViewport(); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: null, - diffPixels: 0, - isEqual: true, - }); - }) -); - -test( - 'should tolerate small color differences', - setupTest(async (page, browser) => { - const firstResult = await page.captureBySelector('#box1'); - await browser.refresh(); - const secondResult = await page.captureBySelector('#box2'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: expect.any(Buffer), - diffPixels: 0, - isEqual: true, - }); - }) -); - -test( - 'should detect major differences', - setupTest(async (page, browser) => { - const firstResult = await page.captureBySelector('#box1'); - await browser.refresh(); - const secondResult = await page.captureBySelector('#box3'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: expect.any(Buffer), - diffPixels: expect.any(Number), - isEqual: false, - }); - }) -); - -test( - 'should compare images with different sizes', - setupTest(async (page, browser) => { - const firstResult = await page.captureBySelector('#box1'); - await browser.refresh(); - const secondResult = await page.captureBySelector('#icon1'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: expect.any(Buffer), - diffPixels: expect.any(Number), - isEqual: false, - }); - }) -); - -test( - 'should capture only visible parts of elements that are positioned off the page', - setupTest(async page => { - const firstResult = await page.captureBySelector('#box-offscreen'); - const secondResult = await page.captureBySelector('#box-offscreen'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ - firstImage: expect.any(Buffer), - secondImage: expect.any(Buffer), - diffImage: null, - diffPixels: 0, - isEqual: true, - }); - }) -); - -test( - 'should generate valid diffs for elements with non-integer widths', - useBrowser(async browser => { - await browser.url('./rounding-test.html'); - const page = new ScreenshotPageObject(browser); - const firstResult = await page.captureBySelector('#box1'); - const secondResult = await page.captureBySelector('#box2'); - const result = await cropAndCompare(firstResult, secondResult); - expect(result.diffPixels).not.toBe(0); - - const { width, height } = new PNG().parse(result.firstImage); - expect(width).toBe(100); // Defined in CSS as 100.333px - expect(height).toBe(51); // Defined in CSS as 50.666 - - // Write images to do manual assessment - fs.writeFileSync('build/screenshots/rounding-diff.png', result.diffImage!); - }) -); - -// the test above is not enough, because it uses Chrome and cannot reproduce IE use-case -test('should generate valid diffs for fractional offsets', async () => { - const red = await parsePng(fs.readFileSync(__dirname + '/fixtures/red.png', 'base64')); - const blue = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue.png', 'base64')); - const width = 199.99999; - const height = 99.99999; - const offset = { - top: 33.33333, - left: 33.33333, - }; - const { diffPixels } = await cropAndCompare( - { image: red, offset, width, height }, - { image: blue, offset, width, height } +describe('compare images', () => { + test( + 'should detect an empty screenshot', + setupTest(async page => { + const result = await page.captureBySelector('#empty-box'); + await expect(cropAndCompare(result, result)).rejects.toThrow(/Image does not contain enough colors/); + }) ); - expect(diffPixels).not.toBe(0); -}); + test( + 'should compare two provided images directly', + setupTest(async (page, browser) => { + const firstResult = await page.captureBySelector('#box1'); + await browser.refresh(); + const secondResult = await page.captureBySelector('#box1'); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: null, + diffPixels: 0, + isEqual: true, + }); + }) + ); -test( - 'should produce correct images', - setupTest(async (page, browser) => { - const firstResult = await page.captureBySelector('#icon1'); - await browser.refresh(); - const secondResult = await page.captureBySelector('#icon2'); - const result = await cropAndCompare(firstResult, secondResult); - // Write images to do manual assessment - fs.writeFileSync('build/screenshots/first.png', result.firstImage); - fs.writeFileSync('build/screenshots/second.png', result.secondImage); - fs.writeFileSync('build/screenshots/diff.png', result.diffImage!); - }) -); - -test('should work with higher device pixel ratios', async () => { - const red = await parsePng(fs.readFileSync(__dirname + '/fixtures/red@2x.png', 'base64')); - const blue = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue@2x.png', 'base64')); - const width = 500; - const height = 150; - const offset = { - top: 10, - left: 10, - }; - - const { diffPixels, diffImage } = await cropAndCompare( - { image: red, pixelRatio: 2, offset, width, height }, - { image: blue, pixelRatio: 2, offset, width, height } + test( + 'should compare viewport screenshots', + setupTest(async (page, browser) => { + + const firstResult = await page.captureViewport(); + await browser.refresh(); + + const secondResult = await page.captureViewport(); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: null, + diffPixels: 0, + isEqual: true, + }); + }) ); - fs.writeFileSync('build/screenshots/diff.png', diffImage!); + test( + 'should tolerate small color differences', + setupTest(async (page, browser) => { + const firstResult = await page.captureBySelector('#box1'); + await browser.refresh(); + const secondResult = await page.captureBySelector('#box2'); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: expect.any(Buffer), + diffPixels: 0, + isEqual: true, + }); + }) + ); - expect(diffPixels).not.toBe(0); -}); + test( + 'should detect major differences', + setupTest(async (page, browser) => { + const firstResult = await page.captureBySelector('#box1'); + await browser.refresh(); + const secondResult = await page.captureBySelector('#box3'); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: expect.any(Buffer), + diffPixels: expect.any(Number), + isEqual: false, + }); + }) + ); + + test( + 'should compare images with different sizes', + setupTest(async (page, browser) => { + const firstResult = await page.captureBySelector('#box1'); + await browser.refresh(); + const secondResult = await page.captureBySelector('#icon1'); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: expect.any(Buffer), + diffPixels: expect.any(Number), + isEqual: false, + }); + }) + ); + + test( + 'should capture only visible parts of elements that are positioned off the page', + setupTest(async page => { + const firstResult = await page.captureBySelector('#box-offscreen'); + const secondResult = await page.captureBySelector('#box-offscreen'); + await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + firstImage: expect.any(Buffer), + secondImage: expect.any(Buffer), + diffImage: null, + diffPixels: 0, + isEqual: true, + }); + }) + ); -test('detects identical images with higher device pixel ratios', async () => { - const img = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue@2x.png', 'base64')); - - const offset = { - top: 10, - left: 10, - width: 500, - height: 150, - }; - const { diffPixels } = await cropAndCompare( - { image: img, pixelRatio: 2, offset, width: img.width, height: img.height }, - { image: img, pixelRatio: 2, offset, width: img.width, height: img.height } + test( + 'should generate valid diffs for elements with non-integer widths', + useBrowser(async browser => { + await browser.url('./rounding-test.html'); + const page = new ScreenshotPageObject(browser); + const firstResult = await page.captureBySelector('#box1'); + const secondResult = await page.captureBySelector('#box2'); + const result = await cropAndCompare(firstResult, secondResult); + expect(result.diffPixels).not.toBe(0); + + const { width, height } = new PNG().parse(result.firstImage); + expect(width).toBe(100); // Defined in CSS as 100.333px + expect(height).toBe(51); // Defined in CSS as 50.666 + + // Write images to do manual assessment + fs.writeFileSync('build/screenshots/rounding-diff.png', result.diffImage!); + }) ); - expect(diffPixels).toBe(0); + // the test above is not enough, because it uses Chrome and cannot reproduce IE use-case + test('should generate valid diffs for fractional offsets', async () => { + const red = await parsePng(fs.readFileSync(__dirname + '/fixtures/red.png', 'base64')); + const blue = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue.png', 'base64')); + const width = 199.99999; + const height = 99.99999; + const offset = { + top: 33.33333, + left: 33.33333, + }; + const { diffPixels } = await cropAndCompare( + { image: red, offset, width, height }, + { image: blue, offset, width, height } + ); + + expect(diffPixels).not.toBe(0); + }); + + test( + 'should produce correct images', + setupTest(async (page, browser) => { + const firstResult = await page.captureBySelector('#icon1'); + await browser.refresh(); + const secondResult = await page.captureBySelector('#icon2'); + const result = await cropAndCompare(firstResult, secondResult); + // Write images to do manual assessment + fs.writeFileSync('build/screenshots/first.png', result.firstImage); + fs.writeFileSync('build/screenshots/second.png', result.secondImage); + fs.writeFileSync('build/screenshots/diff.png', result.diffImage!); + }) + ); + + test('should work with higher device pixel ratios', async () => { + const red = await parsePng(fs.readFileSync(__dirname + '/fixtures/red@2x.png', 'base64')); + const blue = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue@2x.png', 'base64')); + const width = 500; + const height = 150; + const offset = { + top: 10, + left: 10, + }; + + const { diffPixels, diffImage } = await cropAndCompare( + { image: red, pixelRatio: 2, offset, width, height }, + { image: blue, pixelRatio: 2, offset, width, height } + ); + + fs.writeFileSync('build/screenshots/diff.png', diffImage!); + + expect(diffPixels).not.toBe(0); + }); + + test('detects identical images with higher device pixel ratios', async () => { + const img = await parsePng(fs.readFileSync(__dirname + '/fixtures/blue@2x.png', 'base64')); + + const offset = { + top: 10, + left: 10, + width: 500, + height: 150, + }; + const { diffPixels } = await cropAndCompare( + { image: img, pixelRatio: 2, offset, width: img.width, height: img.height }, + { image: img, pixelRatio: 2, offset, width: img.width, height: img.height } + ); + + expect(diffPixels).toBe(0); + }); }); diff --git a/test/utils/global-setup.ts b/test/utils/global-setup.ts index df1c1ce..8b9154f 100644 --- a/test/utils/global-setup.ts +++ b/test/utils/global-setup.ts @@ -1,8 +1,32 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import dns from 'node:dns'; +import allureCmd from 'allure-commandline'; import { startWebdriver, shutdownWebdriver } from '../../lib/chrome-launcher'; import { chromeDriverPort } from './config'; +import path from 'node:path'; + +async function allureGenerate() { + process.env.ALLURE_NO_ANALYTICS = 'true'; + const generation = allureCmd([ + 'generate', + '--clean', + '--report-dir', + path.resolve('build/allure-report'), + path.resolve('build/allure-results'), + ]); + + return new Promise((resolve, reject) => { + const generationTimeout = setTimeout(() => reject(new Error('Allure generation took longer than expected')), 60000); + + generation.on('exit', exitCode => { + clearTimeout(generationTimeout); + + console.log('Allure report generation is finished with code:', exitCode); + resolve(exitCode); + }); + }); +} export async function setup() { // Make sure to favor IPv4 name resolution over IPv6 so that the localhost debugger can be found. @@ -12,4 +36,5 @@ export async function setup() { export function teardown() { shutdownWebdriver(); + allureGenerate(); } diff --git a/vite.config.mts b/vite.config.mts index 6cf646e..d844a1b 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -1,7 +1,9 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { defineConfig } from 'vitest/config'; +import AllureReporter from 'allure-vitest/reporter'; import os from 'node:os'; +import path from 'node:path'; export default defineConfig({ test: { @@ -27,5 +29,6 @@ export default defineConfig({ 'src/chrome-launcher.ts', ], }, + reporters: ['default', new AllureReporter({ resultsDir: path.resolve('build/allure-results') })], }, }); From 10e9ee396cd852407cd79ae3d3ecf08b1f969aa0 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 18:58:32 +0100 Subject: [PATCH 2/7] dump images --- test/compare-images.test.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/test/compare-images.test.ts b/test/compare-images.test.ts index 794faa6..16c54c6 100644 --- a/test/compare-images.test.ts +++ b/test/compare-images.test.ts @@ -1,6 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { test, expect, describe } from 'vitest'; +import * as allure from 'allure-js-commons'; import fs from 'fs'; import { PNG } from 'pngjs'; import useBrowser from '../src/use-browser'; @@ -33,7 +34,13 @@ describe('compare images', () => { const firstResult = await page.captureBySelector('#box1'); await browser.refresh(); const secondResult = await page.captureBySelector('#box1'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + const compareResult = await cropAndCompare(firstResult, secondResult); + await allure.attachment('first', compareResult.firstImage, { contentType: allure.ContentType.PNG }); + await allure.attachment('second', compareResult.secondImage, { contentType: allure.ContentType.PNG }); + if (compareResult.diffImage) { + await allure.attachment('diff', compareResult.diffImage, { contentType: allure.ContentType.PNG }); + } + expect(compareResult).toEqual({ firstImage: expect.any(Buffer), secondImage: expect.any(Buffer), diffImage: null, @@ -46,7 +53,6 @@ describe('compare images', () => { test( 'should compare viewport screenshots', setupTest(async (page, browser) => { - const firstResult = await page.captureViewport(); await browser.refresh(); From 2465097119a830c80d70054b99743fc2c714c261 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 19:02:49 +0100 Subject: [PATCH 3/7] fix github actions --- .github/workflows/build-lint-test.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index 1568ea3..e3ee005 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -10,9 +10,11 @@ on: merge_group: permissions: + id-token: write actions: read contents: read security-events: write + deployments: write jobs: build: @@ -22,6 +24,7 @@ jobs: artifact-path: build/allure-report artifact-name: allure-report deploy: + if: ${{ always() }} needs: build uses: cloudscape-design/actions/.github/workflows/deploy.yml@main secrets: inherit From 1c513574bd3859d32fb1a13b706bf50d2e56f0ea Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 19:05:07 +0100 Subject: [PATCH 4/7] fix allure config --- vite.config.mts | 1 + 1 file changed, 1 insertion(+) diff --git a/vite.config.mts b/vite.config.mts index d844a1b..a32d4c1 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -9,6 +9,7 @@ export default defineConfig({ test: { environment: 'node', globalSetup: './test/utils/global-setup.ts', + setupFiles: ['allure-vitest/setup'], testTimeout: 60000, poolOptions: { threads: { From eea7c78eb2d9c247e0c1c931558bcb9e2f6ecf8b Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 19:14:56 +0100 Subject: [PATCH 5/7] switch actions branch --- .github/workflows/build-lint-test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml index e3ee005..8dfa668 100644 --- a/.github/workflows/build-lint-test.yml +++ b/.github/workflows/build-lint-test.yml @@ -18,7 +18,7 @@ permissions: jobs: build: - uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@main + uses: cloudscape-design/actions/.github/workflows/build-lint-test.yml@always-upload secrets: inherit with: artifact-path: build/allure-report From 99ddcac74568577d109a5e7ccf1386cc9ce59f76 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 19:19:37 +0100 Subject: [PATCH 6/7] more attachements --- test/compare-images.test.ts | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/test/compare-images.test.ts b/test/compare-images.test.ts index 16c54c6..5617dae 100644 --- a/test/compare-images.test.ts +++ b/test/compare-images.test.ts @@ -7,8 +7,17 @@ import { PNG } from 'pngjs'; import useBrowser from '../src/use-browser'; import { ScreenshotPageObject } from '../src/page-objects'; import { cropAndCompare, parsePng } from '../src/image-utils'; +import { CropAndCompareResult } from '../src/image-utils/compare'; import './utils/setup-local-driver'; +async function dumpScreenshots(compareResult: CropAndCompareResult) { + await allure.attachment('first', compareResult.firstImage, { contentType: allure.ContentType.PNG }); + await allure.attachment('second', compareResult.secondImage, { contentType: allure.ContentType.PNG }); + if (compareResult.diffImage) { + await allure.attachment('diff', compareResult.diffImage, { contentType: allure.ContentType.PNG }); + } +} + type TestFn = (page: ScreenshotPageObject, browser: WebdriverIO.Browser) => Promise; function setupTest(testFn: TestFn) { @@ -35,11 +44,7 @@ describe('compare images', () => { await browser.refresh(); const secondResult = await page.captureBySelector('#box1'); const compareResult = await cropAndCompare(firstResult, secondResult); - await allure.attachment('first', compareResult.firstImage, { contentType: allure.ContentType.PNG }); - await allure.attachment('second', compareResult.secondImage, { contentType: allure.ContentType.PNG }); - if (compareResult.diffImage) { - await allure.attachment('diff', compareResult.diffImage, { contentType: allure.ContentType.PNG }); - } + await dumpScreenshots(compareResult); expect(compareResult).toEqual({ firstImage: expect.any(Buffer), secondImage: expect.any(Buffer), @@ -57,7 +62,9 @@ describe('compare images', () => { await browser.refresh(); const secondResult = await page.captureViewport(); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + const compareResult = await cropAndCompare(firstResult, secondResult); + await dumpScreenshots(compareResult); + expect(compareResult).toEqual({ firstImage: expect.any(Buffer), secondImage: expect.any(Buffer), diffImage: null, @@ -105,7 +112,9 @@ describe('compare images', () => { const firstResult = await page.captureBySelector('#box1'); await browser.refresh(); const secondResult = await page.captureBySelector('#icon1'); - await expect(cropAndCompare(firstResult, secondResult)).resolves.toEqual({ + const compareResult = await cropAndCompare(firstResult, secondResult); + await dumpScreenshots(compareResult); + await expect(compareResult).resolves.toEqual({ firstImage: expect.any(Buffer), secondImage: expect.any(Buffer), diffImage: expect.any(Buffer), From 3eff85d32cb5841cfb75a5c4709fcd70f946529a Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Tue, 18 Feb 2025 19:22:02 +0100 Subject: [PATCH 7/7] fix --- test/compare-images.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/compare-images.test.ts b/test/compare-images.test.ts index 5617dae..5f9698a 100644 --- a/test/compare-images.test.ts +++ b/test/compare-images.test.ts @@ -114,7 +114,7 @@ describe('compare images', () => { const secondResult = await page.captureBySelector('#icon1'); const compareResult = await cropAndCompare(firstResult, secondResult); await dumpScreenshots(compareResult); - await expect(compareResult).resolves.toEqual({ + expect(compareResult).toEqual({ firstImage: expect.any(Buffer), secondImage: expect.any(Buffer), diffImage: expect.any(Buffer),