diff --git a/e2e/src/utils/GestureSimulator.ts b/e2e/src/utils/GestureSimulator.ts index 38377d5..63d3b84 100644 --- a/e2e/src/utils/GestureSimulator.ts +++ b/e2e/src/utils/GestureSimulator.ts @@ -28,20 +28,32 @@ export class GestureSimulator { async swipe(options: SwipeOptions): Promise { const { startX, startY, endX, endY, duration } = options; - await this.page.touchscreen.tap(startX, startY); - const steps = 10; const stepDuration = duration / steps; + const touches = [{ + identifier: 0, + clientX: startX, + clientY: startY, + }]; + + await this.page.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); + for (let i = 1; i <= steps; i++) { const x = startX + (endX - startX) * (i / steps); const y = startY + (endY - startY) * (i / steps); - await this.page.touchscreen.touchMove(x, y); + const moveTouches = [{ + identifier: 0, + clientX: x, + clientY: y, + }]; + + await this.page.dispatchEvent('touchmove', { touches: moveTouches, changedTouches: moveTouches, targetTouches: moveTouches }); await this.page.waitForTimeout(stepDuration); } - await this.page.touchscreen.touchEnd(); + await this.page.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] }); } async quickSwipeDown(): Promise { @@ -81,21 +93,44 @@ export class GestureSimulator { const steps = 10; const stepDuration = duration / steps; - await this.page.touchscreen.tap(centerX - startDistanceX, centerY - startDistanceY); - await this.page.touchscreen.tap(centerX + startDistanceX, centerY + startDistanceY); + const touches = [ + { + identifier: 0, + clientX: centerX - startDistanceX, + clientY: centerY - startDistanceY, + }, + { + identifier: 1, + clientX: centerX + startDistanceX, + clientY: centerY + startDistanceY, + }, + ]; + + await this.page.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); for (let i = 1; i <= steps; i++) { const progress = i / steps; const currentDistanceX = startDistanceX + (endDistanceX - startDistanceX) * progress; const currentDistanceY = startDistanceY + (endDistanceY - startDistanceY) * progress; - await this.page.touchscreen.touchMove(centerX - currentDistanceX, centerY - currentDistanceY); - await this.page.touchscreen.touchMove(centerX + currentDistanceX, centerY + currentDistanceY); + const moveTouches = [ + { + identifier: 0, + clientX: centerX - currentDistanceX, + clientY: centerY - currentDistanceY, + }, + { + identifier: 1, + clientX: centerX + currentDistanceX, + clientY: centerY + currentDistanceY, + }, + ]; + + await this.page.dispatchEvent('touchmove', { touches: moveTouches, changedTouches: moveTouches, targetTouches: moveTouches }); await this.page.waitForTimeout(stepDuration); } - await this.page.touchscreen.touchEnd(); - await this.page.touchscreen.touchEnd(); + await this.page.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] }); } async longPress(element: Locator, duration: number = 1000): Promise { @@ -105,9 +140,15 @@ export class GestureSimulator { const x = box.x + box.width / 2; const y = box.y + box.height / 2; - await this.page.touchscreen.tap(x, y); + const touches = [{ + identifier: 0, + clientX: x, + clientY: y, + }]; + + await element.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); await this.page.waitForTimeout(duration); - await this.page.touchscreen.touchEnd(); + await element.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] }); } async doubleTap(element: Locator): Promise { @@ -117,9 +158,17 @@ export class GestureSimulator { const x = box.x + box.width / 2; const y = box.y + box.height / 2; - await this.page.touchscreen.tap(x, y); + const touches = [{ + identifier: 0, + clientX: x, + clientY: y, + }]; + + await element.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); + await element.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] }); await this.page.waitForTimeout(100); - await this.page.touchscreen.tap(x, y); + await element.dispatchEvent('touchstart', { touches, changedTouches: touches, targetTouches: touches }); + await element.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] }); } async drag(options: DragOptions): Promise { diff --git a/e2e/src/utils/MobilePerformanceMonitor.ts b/e2e/src/utils/MobilePerformanceMonitor.ts index 5679738..6c373d7 100644 --- a/e2e/src/utils/MobilePerformanceMonitor.ts +++ b/e2e/src/utils/MobilePerformanceMonitor.ts @@ -18,7 +18,7 @@ export class MobilePerformanceMonitor { async getCoreWebVitals(): Promise { const vitals = await this.page.evaluate(() => { - return new Promise((resolve) => { + return new Promise((resolve) => { const metrics: any = {}; const observer = new PerformanceObserver((list) => { diff --git a/e2e/src/utils/MobileTestDataGenerator.ts b/e2e/src/utils/MobileTestDataGenerator.ts index 36f06ff..60fa157 100644 --- a/e2e/src/utils/MobileTestDataGenerator.ts +++ b/e2e/src/utils/MobileTestDataGenerator.ts @@ -1,6 +1,7 @@ import { Page } from '@playwright/test'; import { getNetworkConfig, NetworkConfig } from '../config/network-configs'; -import { getDevice, DeviceConfig } from './devices'; +import { getDevice } from './devices'; +import { DeviceConfig } from '../types'; export class MobileTestDataGenerator { static generateUserAgent(device: string): string { @@ -38,7 +39,7 @@ export interface PerformanceBaseline { TTI: number; } -MobileTestDataGenerator.generateTouchEvent = function(type: 'tap' | 'swipe' | 'pinch' | 'longPress'): TouchEventData { +export function generateTouchEvent(type: 'tap' | 'swipe' | 'pinch' | 'longPress'): TouchEventData { const baseData = { x: Math.floor(Math.random() * 375), y: Math.floor(Math.random() * 667), @@ -58,7 +59,7 @@ MobileTestDataGenerator.generateTouchEvent = function(type: 'tap' | 'swipe' | 'p } }; -MobileTestDataGenerator.generatePerformanceBaseline = function(device: string, network: string): PerformanceBaseline { +export function generatePerformanceBaseline(device: string, network: string): PerformanceBaseline { const deviceMultiplier = { 'mobile-375x667': 1.2, 'mobile-414x896': 1.1, diff --git a/e2e/src/utils/MobileTestReporter.ts b/e2e/src/utils/MobileTestReporter.ts index 6ea7811..2ae8767 100644 --- a/e2e/src/utils/MobileTestReporter.ts +++ b/e2e/src/utils/MobileTestReporter.ts @@ -1,4 +1,4 @@ -import { FullConfig, FullResult, Suite, TestCase, TestResult } from '@playwright/test'; +import { FullConfig } from '@playwright/test'; export interface TestOverview { total: number; @@ -18,22 +18,22 @@ export interface DeviceTestResult { export class MobileTestReporter { constructor(private config: FullConfig) {} - generateOverview(results: FullResult): TestOverview { - const total = results.suites.reduce((sum, suite) => { - return sum + suite.suites.reduce((suiteSum, subSuite) => { + generateOverview(results: any): TestOverview { + const total = results.suites.reduce((sum: number, suite: any) => { + return sum + suite.suites.reduce((suiteSum: number, subSuite: any) => { return suiteSum + subSuite.cases.length; }, 0); }, 0); - const passed = results.suites.reduce((sum, suite) => { - return sum + suite.suites.reduce((suiteSum, subSuite) => { - return suiteSum + subSuite.cases.filter(c => c.results[0]?.status === 'passed').length; + const passed = results.suites.reduce((sum: number, suite: any) => { + return sum + suite.suites.reduce((suiteSum: number, subSuite: any) => { + return suiteSum + subSuite.cases.filter((c: any) => c.results[0]?.status === 'passed').length; }, 0); }, 0); - const failed = results.suites.reduce((sum, suite) => { - return sum + suite.suites.reduce((suiteSum, subSuite) => { - return suiteSum + subSuite.cases.filter(c => c.results[0]?.status === 'failed').length; + const failed = results.suites.reduce((sum: number, suite: any) => { + return sum + suite.suites.reduce((suiteSum: number, subSuite: any) => { + return suiteSum + subSuite.cases.filter((c: any) => c.results[0]?.status === 'failed').length; }, 0); }, 0); @@ -46,7 +46,7 @@ export class MobileTestReporter { }; } - generateHtmlReport(results: FullResult): string { + generateHtmlReport(results: any): string { const overview = this.generateOverview(results); return ` diff --git a/e2e/src/utils/NetworkSimulator.ts b/e2e/src/utils/NetworkSimulator.ts index 5871d60..c8fd28d 100644 --- a/e2e/src/utils/NetworkSimulator.ts +++ b/e2e/src/utils/NetworkSimulator.ts @@ -29,7 +29,7 @@ export class NetworkSimulator { const request = this.requests.find(r => r.url === response.url()); if (request) { request.status = response.status(); - request.duration = response.timing().responseEnd - response.timing().startTime; + request.duration = 0; } }); }