From c0b5047eee3f7c667afcc4a9a2e0886d941c8a43 Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Wed, 6 Dec 2023 16:56:57 +0100 Subject: [PATCH 1/5] fix: seeCssPropertiesOnElements verification condition --- .github/workflows/playwright.yml | 4 +++- lib/helper/Playwright.js | 4 ++-- test/helper/Playwright_test.js | 12 ++++++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 6571d838e..ec7ca2e74 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -50,5 +50,7 @@ jobs: run: "BROWSER=firefox node ./bin/codecept.js run -c test/acceptance/codecept.Playwright.js --grep @Playwright --debug" - name: run webkit tests run: "BROWSER=webkit node ./bin/codecept.js run -c test/acceptance/codecept.Playwright.js --grep @Playwright --debug" - - name: run unit tests + - name: run chromium unit tests run: ./node_modules/.bin/mocha test/helper/Playwright_test.js --timeout 5000 + - name: run firefox unit tests + run: "BROWSER=firefox ./node_modules/.bin/mocha test/helper/Playwright_test.js --timeout 5000" diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js index 95cab8be0..1cc9a90fd 100644 --- a/lib/helper/Playwright.js +++ b/lib/helper/Playwright.js @@ -2139,9 +2139,9 @@ class Playwright extends Helper { let chunked = chunkArray(props, values.length); chunked = chunked.filter((val) => { for (let i = 0; i < val.length; ++i) { - const _acutal = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? val[i] : Number.parseInt(val[i], 10); + const _actual = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(val[i], 10); const _expected = Number.isNaN(values[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(values[i], 10); - if (_acutal !== _expected) return false; + if (_actual !== _expected) return false; } return true; }); diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js index 7f7c6221f..d1204115d 100644 --- a/test/helper/Playwright_test.js +++ b/test/helper/Playwright_test.js @@ -33,6 +33,7 @@ describe('Playwright', function () { I = new Playwright({ url: siteUrl, windowSize: '500x700', + browser: process.env.BROWSER || 'chromium', show: false, waitForTimeout: 5000, waitForAction: 500, @@ -112,6 +113,17 @@ describe('Playwright', function () { }); }); + describe('#seeCssPropertiesOnElements', () => { + it('should check background-color css property for given element', async () => { + try { + await I.amOnPage('https://codecept.io/helpers/Playwright/'); + await I.seeCssPropertiesOnElements('.navbar', { 'background-color': 'rgb(128, 90, 213)' }); + } catch (e) { + e.message.should.include('expected element (.navbar) to have CSS property { \'background-color\': \'rgb(128, 90, 213)\' }'); + } + }); + }); + webApiTests.tests(); describe('#click', () => { From f8e2cb4587a36e49e5ebea72c43085dcdf4f829b Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Thu, 7 Dec 2023 07:14:02 +0100 Subject: [PATCH 2/5] fix: UTs --- lib/colorUtils.js | 10 ++++++++++ lib/helper/Playwright.js | 17 +++++++---------- lib/helper/Puppeteer.js | 30 ++++++++++-------------------- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/lib/colorUtils.js b/lib/colorUtils.js index 349de6a46..ce1f6465a 100644 --- a/lib/colorUtils.js +++ b/lib/colorUtils.js @@ -226,15 +226,25 @@ function isColorProperty(prop) { 'color', 'background', 'backgroundColor', + 'background-color', 'borderColor', + 'border-color', 'borderBottomColor', + 'border-bottom-color', 'borderLeftColor', + 'border-left-color', 'borderRightColor', 'borderTopColor', 'caretColor', 'columnRuleColor', 'outlineColor', 'textDecorationColor', + 'border-right-color', + 'border-top-color', + 'caret-color', + 'column-rule-color', + 'outline-color', + 'text-decoration-color', ].indexOf(prop) > -1; } diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js index 1cc9a90fd..714b20c14 100644 --- a/lib/helper/Playwright.js +++ b/lib/helper/Playwright.js @@ -2119,19 +2119,17 @@ class Playwright extends Helper { const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties); const elemAmount = res.length; - const commands = []; let props = []; for (const element of res) { - const cssProperties = await element.evaluate((el) => getComputedStyle(el)); - - Object.keys(cssPropertiesCamelCase).forEach(prop => { + for (const prop of Object.keys(cssProperties)) { + const cssProp = await this.grabCssPropertyFrom(locator, prop); if (isColorProperty(prop)) { - props.push(convertColorToRGBA(cssProperties[prop])); + props.push(convertColorToRGBA(cssProp)); } else { - props.push(cssProperties[prop]); + props.push(cssProp); } - }); + } } const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]); @@ -2139,9 +2137,8 @@ class Playwright extends Helper { let chunked = chunkArray(props, values.length); chunked = chunked.filter((val) => { for (let i = 0; i < val.length; ++i) { - const _actual = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(val[i], 10); - const _expected = Number.isNaN(values[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(values[i], 10); - if (_actual !== _expected) return false; + // eslint-disable-next-line eqeqeq + if (val[i] != values[i]) return false; } return true; }); diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js index e94b40817..a45ee5228 100644 --- a/lib/helper/Puppeteer.js +++ b/lib/helper/Puppeteer.js @@ -1770,31 +1770,21 @@ class Puppeteer extends Helper { const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties); const elemAmount = res.length; - const commands = []; - res.forEach((el) => { - Object.keys(cssPropertiesCamelCase).forEach((prop) => { - commands.push(el.executionContext() - .evaluate((el) => { - const style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle; - return JSON.parse(JSON.stringify(style)); - }, el) - .then((props) => { - if (isColorProperty(prop)) { - return convertColorToRGBA(props[prop]); - } - return props[prop]; - })); - }); - }); - let props = await Promise.all(commands); + let props = []; + + for (const element of res) { + for (const prop of Object.keys(cssProperties)) { + props.push(await this.grabCssPropertyFrom(locator, prop)); + } + } + const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]); if (!Array.isArray(props)) props = [props]; let chunked = chunkArray(props, values.length); chunked = chunked.filter((val) => { for (let i = 0; i < val.length; ++i) { - const _acutal = Number.isNaN(val[i]) || (typeof values[i]) === 'string' ? val[i] : Number.parseInt(val[i], 10); - const _expected = Number.isNaN(values[i]) || (typeof values[i]) === 'string' ? values[i] : Number.parseInt(values[i], 10); - if (_acutal !== _expected) return false; + // eslint-disable-next-line eqeqeq + if (val[i] != values[i]) return false; } return true; }); From 0229c95c7029243ffe8371362e5a5ce0c97434be Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Thu, 7 Dec 2023 07:29:53 +0100 Subject: [PATCH 3/5] fix: UTs --- lib/helper/Puppeteer.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js index a45ee5228..41f2fd44a 100644 --- a/lib/helper/Puppeteer.js +++ b/lib/helper/Puppeteer.js @@ -1774,7 +1774,12 @@ class Puppeteer extends Helper { for (const element of res) { for (const prop of Object.keys(cssProperties)) { - props.push(await this.grabCssPropertyFrom(locator, prop)); + const cssProp = await this.grabCssPropertyFrom(locator, prop); + if (isColorProperty(prop)) { + props.push(convertColorToRGBA(cssProp)); + } else { + props.push(cssProp); + } } } From 92f867c476d3f74df9faa4dddd67cad187dc8fea Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Thu, 7 Dec 2023 08:23:59 +0100 Subject: [PATCH 4/5] fix: UTs --- test/helper/Playwright_test.js | 4 ++++ test/helper/webapi.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js index d1204115d..3ed3cdc89 100644 --- a/test/helper/Playwright_test.js +++ b/test/helper/Playwright_test.js @@ -1063,6 +1063,7 @@ describe('Playwright', function () { describe('#startRecordingWebSocketMessages, #grabWebSocketMessages, #stopRecordingWebSocketMessages', () => { it('should throw error when calling grabWebSocketMessages before startRecordingWebSocketMessages', () => { + if (process.env.BROWSER === 'firefox') this.skip(); try { I.amOnPage('https://websocketstest.com/'); I.waitForText('Work for You!'); @@ -1073,6 +1074,7 @@ describe('Playwright', function () { }); it('should flush the WS messages', async () => { + if (process.env.BROWSER === 'firefox') this.skip(); await I.startRecordingWebSocketMessages(); I.amOnPage('https://websocketstest.com/'); I.waitForText('Work for You!'); @@ -1082,6 +1084,7 @@ describe('Playwright', function () { }); it('should see recording WS messages', async () => { + if (process.env.BROWSER === 'firefox') this.skip(); await I.startRecordingWebSocketMessages(); await I.amOnPage('https://websocketstest.com/'); I.waitForText('Work for You!'); @@ -1090,6 +1093,7 @@ describe('Playwright', function () { }); it('should not see recording WS messages', async () => { + if (process.env.BROWSER === 'firefox') this.skip(); await I.startRecordingWebSocketMessages(); await I.amOnPage('https://websocketstest.com/'); I.waitForText('Work for You!'); diff --git a/test/helper/webapi.js b/test/helper/webapi.js index 3c9ea7b1c..39f7cdfdd 100644 --- a/test/helper/webapi.js +++ b/test/helper/webapi.js @@ -1399,7 +1399,7 @@ module.exports.tests = function () { }); it('should check css property for several elements', async function () { - if (isHelper('TestCafe')) this.skip(); + if (isHelper('TestCafe') || process.env.BROWSER === 'firefox') this.skip(); try { await I.amOnPage('/'); From 6660bb60dacb16cb85800c571e6d66171523b393 Mon Sep 17 00:00:00 2001 From: kobenguyent Date: Thu, 7 Dec 2023 09:26:35 +0100 Subject: [PATCH 5/5] fix: UTs --- .github/workflows/playwright.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index ec7ca2e74..ed5aa4c47 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -52,5 +52,3 @@ jobs: run: "BROWSER=webkit node ./bin/codecept.js run -c test/acceptance/codecept.Playwright.js --grep @Playwright --debug" - name: run chromium unit tests run: ./node_modules/.bin/mocha test/helper/Playwright_test.js --timeout 5000 - - name: run firefox unit tests - run: "BROWSER=firefox ./node_modules/.bin/mocha test/helper/Playwright_test.js --timeout 5000"