Update Playwright version

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

@@ -564,10 +564,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
             );
         });
 
@@ -578,10 +578,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
             );
         });