diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 6571d838e..ed5aa4c47 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -50,5 +50,5 @@ 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 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 95cab8be0..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 _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; }); diff --git a/lib/helper/Puppeteer.js b/lib/helper/Puppeteer.js index e94b40817..41f2fd44a 100644 --- a/lib/helper/Puppeteer.js +++ b/lib/helper/Puppeteer.js @@ -1770,31 +1770,26 @@ 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)) { + const cssProp = await this.grabCssPropertyFrom(locator, prop); + if (isColorProperty(prop)) { + props.push(convertColorToRGBA(cssProp)); + } else { + props.push(cssProp); + } + } + } + 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; }); diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js index 7f7c6221f..3ed3cdc89 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', () => { @@ -1051,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!'); @@ -1061,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!'); @@ -1070,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!'); @@ -1078,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('/');