Update e2e tests

.gitignore

@@ -28,7 +28,9 @@ e2e-results/
 .idea
 .DS_Store
 
-# Cypress
-cypress/report.json
-cypress/videos/
-cypress/screenshots/actual
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

package.json

@@ -79,7 +79,7 @@
     "stop": "docker compose down",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --maxWorkers 4 --coverage",
-    "test:e2e": "npx playwright test",
+    "test:e2e": "npx playwright test --ui",
     "test:e2e:docker": "docker compose --profile e2e up --exit-code-from test",
     "upgrade": "npm upgrade --save"
   },

src/components/Table/Table.tsx

@@ -348,7 +348,7 @@ export const Table = <TData,>({
       >
         <thead className={styles.header} ref={tableHeaderRef} style={{ top: topOffset }}>
           {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id} className={styles.headerRow}>
+            <tr key={headerGroup.id} className={styles.headerRow} {...TEST_IDS.table.headerRow.apply(headerGroup.id)}>
               {headerGroup.headers.map((header) => (
                 <th
                   key={header.id}

src/components/editors/TablesEditor/TablesEditor.tsx

@@ -185,6 +185,7 @@ export const TablesEditor: React.FC<Props> = ({ context: { options, data }, onCh
                         {...provided.draggableProps}
                         style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                         className={styles.item}
+                        {...testIds.item.apply(item.name)}
                       >
                         <Collapse
                           key={item.name}

src/constants.ts

@@ -54,6 +54,7 @@ export const TEST_IDS = {
     buttonCancelRename: createSelector('data-testid tables-editor button-cancel-rename'),
     buttonSaveRename: createSelector('data-testid tables-editor button-save-rename'),
     fieldName: createSelector('data-testid tables-editor field-name'),
+    item: createSelector((name: unknown) => `data-testid tables-editor item-${name}`),
     itemHeader: createSelector((name: unknown) => `data-testid tables-editor item-header-${name}`),
     itemContent: createSelector((name: unknown) => `data-testid tables-editor item-content-${name}`),
     newItem: createSelector('data-testid tables-editor new-level'),
@@ -104,6 +105,7 @@ export const TEST_IDS = {
   },
   table: {
     root: createSelector('data-testid table'),
+    headerRow: createSelector((name: unknown) => `data-testid table header-row-${name}`),
     headerCell: createSelector((name: unknown) => `data-testid table header-cell-${name}`),
     footerCell: createSelector((name: unknown) => `data-testid table footer-cell-${name}`),
     bodyRow: createSelector((name: unknown) => `data-testid table body-row-${name}`),