Playwright测试Svelte应用：Mapbox与LineAwesome相关失败问题求解

核心原因 #

Mapbox 地图初始化是异步过程，通用等待方法（如等待元素可见）无法精准判断地图是否完全就绪，导致调用mapContainer.getQueryString()时地图状态未稳定，返回的分享链接不一致。

解决方案 #

1. 监听 Mapbox 原生加载事件
   在 Svelte 组件中暴露地图加载完成的 Promise，供测试用例等待：

   <!-- MapComponent.svelte -->
   <script>
     import mapboxgl from 'mapbox-gl';
     export let mapLoaded = new Promise(resolve => {
       const map = new mapboxgl.Map({
         container: 'map',
         style: 'mapbox://styles/mapbox/streets-v12',
         // 其他配置项
       });
       map.on('load', () => resolve(map));
     });
   </script>
   <div id="map" data-testid="map-container"></div>
   

   测试用例中等待 Promise 完成后再获取分享链接：

   // share-view.test.js
   test('stable share link', async ({ page }) => {
     await page.goto('/');
     // 等待地图加载完成
     await page.waitForFunction(() => window.mapLoaded);
     // 获取并断言分享链接
     const shareLink = await page.locator('[data-testid="map-container"]').evaluate(el => el.getQueryString());
     expect(shareLink).toBe(expectedLink);
   });
   

2. 等待地图进入 idle 状态
   Mapbox 的idle事件表示所有资源加载完成、渲染就绪，比load事件更适合判断稳定状态：

   // 测试用例中添加
   await page.evaluate(() => {
     return new Promise(resolve => {
       window.mapInstance.on('idle', resolve); // 假设组件将map实例暴露到window
     });
   });
   

3. 用 waitForFunction 确保链接稳定
   若仍有波动，可多次检查分享链接，直到连续两次结果一致：

   const stableShareLink = await page.waitForFunction(async () => {
     const link1 = document.querySelector('[data-testid="map-container"]').getQueryString();
     await new Promise(r => setTimeout(r, 100));
     const link2 = document.querySelector('[data-testid="map-container"]').getQueryString();
     return link1 === link2 ? link1 : null;
   });
   expect(stableShareLink).toBe(expectedLink);
   

核心原因 #

测试环境中 Line-Awesome 资源未正确加载（路径错误、资源被拦截、加载延迟），导致按钮因图标未渲染而不符合toBeVisible()的断言条件（Playwright 会检查元素是否在视口内且不透明）。

解决方案 #

1. 确保测试环境加载 Line-Awesome CSS
   检查应用入口是否正确引入样式：

   // src/main.js
   import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
   

   同时在 Playwright 配置中避免拦截必要资源：

   // playwright.config.js
   export default defineConfig({
     use: {
       ignoreHTTPSErrors: true,
       // 不要添加拦截Line-Awesome资源的规则
     },
   });
   

2. 调整断言逻辑，不依赖图标加载
   若图标不是测试核心，可改为断言按钮存在性或文本：

   // modify-info.test.js
   // 替代toBeVisible()
   await expect(page.locator('[data-testid="update-button"]')).toBeAttached();
   // 或检查按钮文本
   await expect(page.locator('[data-testid="update-button"]')).toHaveText('更新');
   

3. 等待图标元素就绪
   若必须依赖图标可见，可等待图标的 CSS 类出现：

   // 等待按钮内的Line-Awesome图标加载完成
   await page.locator('[data-testid="update-button"] .la').waitFor({ state: 'visible' });
   // 再断言按钮可见
   await expect(page.locator('[data-testid="update-button"]')).toBeVisible();
   

4. 强制图标显示（测试专用）
   注入样式强制图标可见，避免资源加载失败影响测试：

   await page.addStyleTag({ content: `
     .la {
       display: inline-block !important;
       width: 1em;
       height: 1em;
       visibility: visible !important;
     }
   ` });
   

内容的提问来源于stack exchange，提问作者Fernando Petrulio