Upgrade Playwright to v1.58.2 and fix JPG background color handling (#249)

This pull request upgrades Playwright from version 1.51.1 to 1.58.2 and fixes a bug where JPG exports always used a white background regardless of the configured background color.

The JPG export functionality now properly respects the background color setting, using white as a fallback only when the background is set to transparent. This fix applies to both single QR code downloads and batch exports.

A comprehensive end-to-end test has been added to verify that JPG files preserve the correct background color by analyzing pixel data from the exported image.

Author: lyqht

package.json

@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9",
-    "@playwright/test": "^1.51.1",
+    "@playwright/test": "^1.58.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/dom-to-image": "^2.6.7",
     "@types/node": "^20.17.23",

pnpm-lock.yaml

@@ -521,7 +521,9 @@ function downloadQRImage(format: 'png' | 'svg' | 'jpg') {
       jpg: {
         fn: downloadJpgElement,
         filename: `${sanitizedFilename}.jpg`,
-        extraOptions: { bgcolor: 'white' }
+        extraOptions: {
+          bgcolor: styleBackground.value === 'transparent' ? '#ffffff' : styleBackground.value
+        }
       }
     }[format]
 
@@ -839,7 +841,13 @@ async function generateBatchQRCodes(format: 'png' | 'svg' | 'jpg') {
       if (format === 'png') {
         dataUrl = await getPngElement(el, getExportDimensions(), styledBorderRadiusFormatted.value)
       } else if (format === 'jpg') {
-        dataUrl = await getJpgElement(el, getExportDimensions(), styledBorderRadiusFormatted.value)
+        const jpgBgcolor =
+          styleBackground.value === 'transparent' ? '#ffffff' : styleBackground.value
+        dataUrl = await getJpgElement(
+          el,
+          { ...getExportDimensions(), bgcolor: jpgBgcolor },
+          styledBorderRadiusFormatted.value
+        )
       } else {
         dataUrl = await getSvgString(el, getExportDimensions(), styledBorderRadiusFormatted.value)
       }

src/components/QRCodeCreate.vue

@@ -2,6 +2,7 @@ import { test, expect, type Page } from '@playwright/test'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
+import sharp from 'sharp'
 
 // Helper for ES module scope
 const __filename = fileURLToPath(import.meta.url)
@@ -199,6 +200,67 @@ test.describe('QR Code Creation and Management', () => {
     })
   })
 
+  test.describe('JPG background color preservation', () => {
+    const tempDir = path.join(__dirname, 'temp-jpg-bg')
+
+    test.beforeAll(async () => {
+      if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir, { recursive: true })
+      }
+    })
+
+    test.afterAll(async () => {
+      if (fs.existsSync(tempDir)) {
+        fs.rmSync(tempDir, { recursive: true, force: true })
+      }
+    })
+
+    test('saved JPG should preserve the background color set on the default preset', async ({
+      page
+    }) => {
+      // The default preset (lyqht) loads automatically with background #697d80.
+      // Set a vivid red background that is clearly distinct from white so the
+      // bug (bgcolor always 'white') is easy to detect.
+      const bgColor = '#ff0000'
+      await page.locator('#background-color').fill(bgColor)
+      // Add margin so the top-left corner area is guaranteed background colour.
+      await page.locator('#margin').fill('20')
+      await page.waitForTimeout(800)
+
+      await openFrameSettings(page)
+      const showFrameCheckbox = page.locator('#show-frame')
+      await expect(showFrameCheckbox).toBeVisible()
+      await showFrameCheckbox.uncheck()
+      await page.waitForTimeout(500)
+
+      const downloadPromise = page.waitForEvent('download')
+      await page.locator('#download-qr-image-button-jpg').click()
+      const download = await downloadPromise
+
+      expect(download.suggestedFilename()).toMatch(/\.jpg$/i)
+
+      const downloadedFilePath = path.join(tempDir, 'bg-color-test.jpg')
+      await download.saveAs(downloadedFilePath)
+      expect(fs.existsSync(downloadedFilePath)).toBeTruthy()
+
+      // Read the top-left corner pixel (within the margin / background area).
+      // With margin=20 modules, even a small QR code has several pixels of pure
+      // background at the very top-left corner.
+      const { data } = await sharp(downloadedFilePath)
+        .extract({ left: 5, top: 5, width: 1, height: 1 })
+        .raw()
+        .toBuffer({ resolveWithObject: true })
+
+      // JPEG is lossy, allow ±20 per channel
+      const r = data[0]
+      const g = data[1]
+      const b = data[2]
+      expect(r).toBeGreaterThan(200) // red channel should be high (~255)
+      expect(g).toBeLessThan(80) // green channel should be low (~0)
+      expect(b).toBeLessThan(80) // blue channel should be low (~0)
+    })
+  })
+
   test.describe('Batch Export QR Codes', () => {
     const simpleCsvPath = '6_strings_batch.csv' // Assuming it's in public folder