get pixel colour util for e2e tests (#2599)

* get pixel colour for e2e tests

* remove cleverness

e2e/playwright/flow-tests.spec.ts

@@ -134,9 +134,14 @@ test('Basic sketch', async ({ page }) => {
   await page.getByRole('button', { name: 'Line' }).click()
   await page.waitForTimeout(100)
 
+  const line1 = await u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`, 0)
+  await expect(await u.getGreatestPixDiff(line1, [249, 249, 249])).toBeLessThan(
+    3
+  )
   // click between first two clicks to get center of the line
   await page.mouse.click(startXPx + PUR * 15, 500 - PUR * 10)
   await page.waitForTimeout(100)
+  await expect(await u.getGreatestPixDiff(line1, [0, 0, 255])).toBeLessThan(3)
 
   // hold down shift
   await page.keyboard.down('Shift')

e2e/playwright/test-utils.ts

@@ -215,8 +215,8 @@ export async function getUtils(page: Page) {
       const angleXOffset = Math.cos(((angle - 180) * Math.PI) / 180) * px
       const angleYOffset = Math.sin(((angle - 180) * Math.PI) / 180) * px
       return {
-        x: bbox.x + angleXOffset,
-        y: bbox.y - angleYOffset,
+        x: Math.round(bbox.x + angleXOffset),
+        y: Math.round(bbox.y - angleYOffset),
       }
     },
     getAngle: async (locator: string) => {
@@ -243,6 +243,30 @@ export async function getUtils(page: Page) {
         await closeDebugPanel(page)
       }
     },
+    /**
+     * Given an expected RGB value, diff if the channel with the largest difference
+     */
+    getGreatestPixDiff: async (
+      coords: { x: number; y: number },
+      expected: [number, number, number]
+    ): Promise<number> => {
+      const buffer = await page.screenshot({
+        fullPage: true,
+      })
+      const screenshot = await PNG.sync.read(buffer)
+      // most likely related to pixel density but the screenshots for webkit are 2x the size
+      // there might be a more robust way of doing this.
+      const pixMultiplier = browserType === 'webkit' ? 2 : 1
+      const index =
+        (screenshot.width * coords.y * pixMultiplier +
+          coords.x * pixMultiplier) *
+        4 // rbga is 4 channels
+      return Math.max(
+        Math.abs(screenshot.data[index] - expected[0]),
+        Math.abs(screenshot.data[index + 1] - expected[1]),
+        Math.abs(screenshot.data[index + 2] - expected[2])
+      )
+    },
     doAndWaitForImageDiff: (fn: () => Promise<any>, diffCount = 200) =>
       new Promise(async (resolve) => {
         await page.screenshot({