Update Playwright version (#1728)

# 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 <rajsite@users.noreply.github.com>

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"
   }

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"
+}

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"
+}

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"
   }
 }

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",

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",

packages/nimble-components/src/table/testing/table.pageobject.ts

@@ -335,7 +335,11 @@ export class TablePageObject<T extends TableRecord> {
 
     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<T extends TableRecord> {
         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
         );
     }
 

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
             );
         });