From 762a3cb1944836ddf9dc5fdff48892c1650c1f8d Mon Sep 17 00:00:00 2001 From: m-akinc <7282195+m-akinc@users.noreply.github.com> Date: Tue, 16 Jan 2024 17:27:32 -0600 Subject: [PATCH] Update Playwright version (#1728) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Fixes #1544 ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation - Added `postinstall` script to root package file that runs `playwright install --with-deps` to ensure browsers get installed. - Bumped dependency versions of Playwright to 1.40.0 in nimble-components, nimble-blazor, and Angular workspace. They are now pinned to one version, because the root workspace package file now installs the browsers. - Fixed two table page object functions that were incorrect. - Added workaround (rounding cell width) for tests failing due to pulling in new version of Chrome browser (from 115.0.5790.75 to 120.0.6099.28). Six table interactive column resize tests began failing with errors like `Expected 100.984375 to be 101.` and `Expected 74.984375 to be 75.` I confirmed that this numerical imprecision is related to using fractional width units (e.g. `1fr`). We still cannot have Renovate update the Playwright dependency because of the inconsistency of versions between the npm package and the nuget. E.g. currently the latest npm package is 1.40.1, but the latest nuget is only 1.40.0, so our build will fail as it tries to find a nuget with the same version as the npm package. ## ๐Ÿงช Testing Pipeline build succeeds ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj --- angular-workspace/package.json | 2 +- ...-997a7b59-692f-45ae-b302-993995035699.json | 7 +++ ...-ee39f42f-cd28-42b3-837e-0df5b4842e70.json | 7 +++ package-lock.json | 55 +++++-------------- package.json | 6 +- packages/nimble-blazor/package.json | 2 +- packages/nimble-components/package.json | 2 +- .../src/table/testing/table.pageobject.ts | 14 +++-- .../table/tests/table-column-sizing.spec.ts | 8 +-- 9 files changed, 49 insertions(+), 54 deletions(-) create mode 100644 change/@ni-nimble-blazor-997a7b59-692f-45ae-b302-993995035699.json create mode 100644 change/@ni-nimble-components-ee39f42f-cd28-42b3-837e-0df5b4842e70.json diff --git a/angular-workspace/package.json b/angular-workspace/package.json index e165c9ccd1..cb60a552d9 100644 --- a/angular-workspace/package.json +++ b/angular-workspace/package.json @@ -55,7 +55,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^15.2.2", - "playwright": "^1.30.0", + "playwright": "1.40.0", "rollup": "^3.10.1", "typescript": "~4.8.2" } diff --git a/change/@ni-nimble-blazor-997a7b59-692f-45ae-b302-993995035699.json b/change/@ni-nimble-blazor-997a7b59-692f-45ae-b302-993995035699.json new file mode 100644 index 0000000000..6994994048 --- /dev/null +++ b/change/@ni-nimble-blazor-997a7b59-692f-45ae-b302-993995035699.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update Playwright version", + "packageName": "@ni/nimble-blazor", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/change/@ni-nimble-components-ee39f42f-cd28-42b3-837e-0df5b4842e70.json b/change/@ni-nimble-components-ee39f42f-cd28-42b3-837e-0df5b4842e70.json new file mode 100644 index 0000000000..2c7f20f5d9 --- /dev/null +++ b/change/@ni-nimble-components-ee39f42f-cd28-42b3-837e-0df5b4842e70.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update Playwright version", + "packageName": "@ni/nimble-components", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/package-lock.json b/package-lock.json index 0efc582c22..99d17159ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,8 @@ "@lhci/cli": "^0.12.0", "beachball": "^2.31.0", "cross-env": "^7.0.3", - "patch-package": "^6.4.7" + "patch-package": "^6.4.7", + "playwright": "1.40.0" } }, "angular-workspace": { @@ -63,7 +64,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^15.2.2", - "playwright": "^1.30.0", + "playwright": "1.40.0", "rollup": "^3.10.1", "typescript": "~4.8.2" } @@ -29200,25 +29201,27 @@ } }, "node_modules/playwright": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.36.1.tgz", - "integrity": "sha512-2ZqHpD0U0COKR8bqR3W5IkyIAAM0mT9FgGJB9xWCI1qAUkqLxJskA1ueeQOTH2Qfz3+oxdwwf2EzdOX+RkZmmQ==", + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz", + "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==", "dev": true, - "hasInstallScript": true, "dependencies": { - "playwright-core": "1.36.1" + "playwright-core": "1.40.0" }, "bin": { "playwright": "cli.js" }, "engines": { "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" } }, "node_modules/playwright-core": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz", - "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==", + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz", + "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -36276,7 +36279,7 @@ "@rollup/plugin-node-resolve": "^15.0.1", "cross-env": "^7.0.3", "glob": "^8.1.0", - "playwright": "1.36.0", + "playwright": "1.40.0", "rollup": "^3.10.1" } }, @@ -36317,34 +36320,6 @@ "node": ">=10" } }, - "packages/nimble-blazor/node_modules/playwright": { - "version": "1.36.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.36.0.tgz", - "integrity": "sha512-ODVOTp5WoRMxDJY3liMmC+wVNicc0cQB17gASvQ+zLBggVK9a2x3gdT5mbl7av+zomvtdirWOqqfD+O6qIrFgw==", - "dev": true, - "hasInstallScript": true, - "dependencies": { - "playwright-core": "1.36.0" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, - "packages/nimble-blazor/node_modules/playwright-core": { - "version": "1.36.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.0.tgz", - "integrity": "sha512-7RTr8P6YJPAqB+8j5ATGHqD6LvLLM39sYVNsslh78g8QeLcBs5750c6+msjrHUwwGt+kEbczBj1XB22WMwn+WA==", - "dev": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/nimble-components": { "name": "@ni/nimble-components", "version": "20.17.6", @@ -36431,7 +36406,7 @@ "karma-spec-reporter": "^0.0.36", "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", - "playwright": "^1.30.0", + "playwright": "1.40.0", "prettier": "^2.8.8", "prettier-eslint": "^15.0.1", "prettier-eslint-cli": "^7.1.0", diff --git a/package.json b/package.json index 9b18f784e0..6531ea96c0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "private": true, "description": "The NI Nimble Design System Monorepo", "scripts": { - "postinstall": "patch-package", + "postinstall": "patch-package && npm run playwright:setup", + "playwright:setup": "playwright install --with-deps", "build": "npm run build --workspaces --if-present", "lint": "npm run lint --workspaces --if-present", "format": "npm run format --workspaces --if-present", @@ -44,6 +45,7 @@ "@lhci/cli": "^0.12.0", "beachball": "^2.31.0", "cross-env": "^7.0.3", - "patch-package": "^6.4.7" + "patch-package": "^6.4.7", + "playwright": "1.40.0" } } diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json index 0ca8507ff0..9b5746cf70 100644 --- a/packages/nimble-blazor/package.json +++ b/packages/nimble-blazor/package.json @@ -44,7 +44,7 @@ "@ni/eslint-config-javascript": "^4.2.0", "@ni/nimble-components": "*", "@ni/nimble-tokens": "*", - "playwright": "1.36.0", + "playwright": "1.40.0", "@rollup/plugin-node-resolve": "^15.0.1", "cross-env": "^7.0.3", "glob": "^8.1.0", diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 3554eb7887..5ad8ed5748 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -138,7 +138,7 @@ "karma-spec-reporter": "^0.0.36", "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", - "playwright": "^1.30.0", + "playwright": "1.40.0", "prettier": "^2.8.8", "prettier-eslint": "^15.0.1", "prettier-eslint-cli": "^7.1.0", diff --git a/packages/nimble-components/src/table/testing/table.pageobject.ts b/packages/nimble-components/src/table/testing/table.pageobject.ts index 88c3d370ba..671049d79f 100644 --- a/packages/nimble-components/src/table/testing/table.pageobject.ts +++ b/packages/nimble-components/src/table/testing/table.pageobject.ts @@ -335,7 +335,11 @@ export class TablePageObject { public getCellRenderedWidth(rowIndex: number, columnIndex: number): number { const cell = this.getCell(rowIndex, columnIndex); - return cell.getBoundingClientRect().width; + const actualWidth = cell.getBoundingClientRect().width; + // Round to one decimal place. This is to work around a bug in Chrome related to + // fractional widths (e.g. '1fr') in grid layouts that results in some numerical + // precision issues. See: https://bugs.chromium.org/p/chromium/issues/detail?id=1515685 + return Math.round(actualWidth * 10) / 10; } public getTotalCellRenderedWidth(): number { @@ -613,17 +617,17 @@ export class TablePageObject { return headerContainers[index]!.querySelector('.column-divider.left'); } - public isHorizontalScrollbarVisible(): boolean { + public isVerticalScrollbarVisible(): boolean { return ( this.tableElement.viewport.clientHeight - !== this.tableElement.viewport.getBoundingClientRect().height + < this.tableElement.viewport.scrollHeight ); } - public isVerticalScrollbarVisible(): boolean { + public isHorizontalScrollbarVisible(): boolean { return ( this.tableElement.viewport.clientWidth - !== this.tableElement.viewport.getBoundingClientRect().width + < this.tableElement.viewport.scrollWidth ); } diff --git a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts index f24dfd43c6..19a069a649 100644 --- a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts +++ b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts @@ -531,10 +531,10 @@ describe('Table Interactive Column Sizing', () => { 0, 1 ); - pageObject.dragSizeColumnByRightDivider(0, [50]); + pageObject.dragSizeColumnByRightDivider(0, [5]); await waitForUpdatesAsync(); expect(pageObject.getCellRenderedWidth(0, 1)).toBe( - secondVisibleCellWidth - 50 + secondVisibleCellWidth - 5 ); }); @@ -545,10 +545,10 @@ describe('Table Interactive Column Sizing', () => { 0, 1 ); - pageObject.dragSizeColumnByRightDivider(1, [-50]); + pageObject.dragSizeColumnByRightDivider(1, [-5]); await waitForUpdatesAsync(); expect(pageObject.getCellRenderedWidth(0, 1)).toBe( - secondVisibleCellWidth - 50 + secondVisibleCellWidth - 5 ); });