test(playwright): fix edge selection and auto pan tests

examples/react/src/generic-tests/edges/general.ts

@@ -3,6 +3,7 @@ import { MarkerType } from '@xyflow/react';
 export default {
   flowProps: {
     fitView: true,
+    multiSelectionKeyCode: 's',
     nodes: [
       {
         id: '1',

tests/playwright/e2e/edges.spec.ts

@@ -30,11 +30,12 @@ test.describe('Edges', () => {
       await edge1.click();
       await expect(edge1).toHaveClass(/selected/);
 
-      // FIXME: I cannot get this to work
-      await page.keyboard.down('MetaLeft');
+      // we are using "s" here because Meta doesn't work for some reason
+      await page.keyboard.down('s');
       await edge2.click();
-      await expect(edge2).toHaveClass(/selected/);
+      await page.keyboard.up('s');
 
+      await expect(edge2).toHaveClass(/selected/);
       await expect(edge1).toHaveClass(/selected/);
     });
   });
@@ -88,8 +89,6 @@ test.describe('Edges', () => {
 
       await expect(edge).toBeAttached();
 
-      const edgeBox = await edge.boundingBox();
-
       await edge.click();
       await expect(edge).toHaveClass(/selected/);
 
@@ -154,8 +153,8 @@ test.describe('Edges', () => {
 
       await expect(edge).toBeAttached();
 
-      await expect(edge).toHaveAttribute('marker-start', 'url(#1__type=arrowclosed)');
-      await expect(edge).toHaveAttribute('marker-end', 'url(#1__type=arrow)');
+      await expect(edge).toHaveAttribute('marker-start', "url('#1__type=arrowclosed')");
+      await expect(edge).toHaveAttribute('marker-end', "url('#1__type=arrow')");
     });
   });
 });

tests/playwright/e2e/pane.spec.ts

@@ -52,7 +52,7 @@ test.describe('Pane default', () => {
   });
 
   test.describe('minZoom & maxZoom', () => {
-    test('minZoom works as intended', async ({ page }) => {
+    test('minZoom', async ({ page }) => {
       const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
 
@@ -67,7 +67,7 @@ test.describe('Pane default', () => {
       expect(transformsMinZoom.scale).toBe(0.25);
     });
 
-    test('maxZoom works as intended', async ({ page }) => {
+    test('maxZoom', async ({ page }) => {
       const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
 
@@ -84,7 +84,7 @@ test.describe('Pane default', () => {
   });
 
   test.describe('autoPan', () => {
-    test('autoPanOnNodeDrag works as intended', async ({ page }) => {
+    test('autoPanOnNodeDrag', async ({ page }) => {
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
       const node = page.locator('[data-id="1"]');
 
@@ -96,7 +96,8 @@ test.describe('Pane default', () => {
       await page.mouse.down();
       await page.mouse.move(0, 0);
       await page.waitForTimeout(500);
-      await page.mouse.move(100, 100);
+      await page.mouse.move(1000, 100, { steps: 100 });
+      await page.mouse.up();
 
       const transformAfter = await getTransform(viewport);
 
@@ -104,7 +105,7 @@ test.describe('Pane default', () => {
       await expect(transformAfter.translateY).toBeGreaterThan(transformBefore.translateY);
     });
 
-    test('autoPanOnConnect works as intended', async ({ page }) => {
+    test('autoPanOnConnect', async ({ page }) => {
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
       const handle = page.locator(`[data-id="1"] .${FRAMEWORK}-flow__handle`);
 
@@ -116,7 +117,7 @@ test.describe('Pane default', () => {
       await page.mouse.down();
       await page.mouse.move(0, 0);
       await page.waitForTimeout(500);
-      await page.mouse.move(100, 100);
+      await page.mouse.move(100, 100, { steps: 100 });
 
       const transformAfter = await getTransform(viewport);
 

tests/playwright/package.json

@@ -13,11 +13,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "^1.42.1",
     "@types/node": "^18.7.16"
   },
   "dependencies": {
-    "@playwright/experimental-ct-react": "^1.40.1",
+    "@playwright/experimental-ct-react": "^1.42.1",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",