forked from jsnbuchanan/crowd-funder-for-time-pwa
f07a2de565
- Add better error handling and logging for gift recording flow - Add explicit navigation to contacts page before finding gift button - Add info icon click handling when needed - Add more comprehensive button detection with multiple selectors - Add debug logging for page state and navigation - Add screenshot capture on failures - Add retry logic with proper state verification - Fix linter errors in playwright config The changes help diagnose and handle various UI states that can occur during gift recording, making the tests more reliable especially on Linux.
78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
import path from 'path';
|
|
import { test, expect } from '@playwright/test';
|
|
import { importUser, getOSSpecificTimeout } from './testUtils';
|
|
|
|
test('Record item given from image-share', async ({ page }) => {
|
|
const TIMEOUT = getOSSpecificTimeout();
|
|
|
|
let randomString = Math.random().toString(36).substring(2, 8);
|
|
const finalTitle = `Gift ${randomString} from image-share`;
|
|
|
|
await importUser(page, '00');
|
|
|
|
// Record something given with increased timeout
|
|
await page.goto('./test', { timeout: TIMEOUT });
|
|
|
|
const fileChooserPromise = page.waitForEvent('filechooser');
|
|
await page.getByTestId('fileInput').click();
|
|
const fileChooser = await fileChooserPromise;
|
|
await fileChooser.setFiles(path.join(__dirname, '..', 'public', 'img', 'icons', 'android-chrome-192x192.png'));
|
|
|
|
// Wait for file upload to complete
|
|
await page.waitForTimeout(2000);
|
|
await page.waitForLoadState('networkidle', { timeout: TIMEOUT });
|
|
|
|
// Click gift button and wait for navigation
|
|
await page.getByRole('button').filter({ hasText: /gift/i }).click();
|
|
await page.waitForLoadState('networkidle', { timeout: TIMEOUT });
|
|
|
|
// Wait for form to be ready
|
|
await expect(page.getByPlaceholder('What was received')).toBeVisible({ timeout: TIMEOUT });
|
|
await page.getByPlaceholder('What was received').fill(finalTitle);
|
|
await page.getByRole('spinbutton').fill('2');
|
|
await page.getByRole('button', { name: 'Sign & Send' }).click();
|
|
|
|
// Wait for onboarding and confirmation
|
|
await page.getByTestId('closeOnboardingAndFinish').click();
|
|
await expect(page.getByText('That gift was recorded.')).toBeVisible({ timeout: TIMEOUT });
|
|
await page.locator('div[role="alert"] button > svg.fa-xmark').click();
|
|
|
|
// Verify on home page
|
|
await page.goto('./');
|
|
await page.waitForLoadState('networkidle', { timeout: TIMEOUT });
|
|
const item1 = page.locator('li').filter({ hasText: finalTitle });
|
|
await expect(item1).toBeVisible({ timeout: TIMEOUT });
|
|
});
|
|
|
|
// // I believe there's a way to test this service worker feature.
|
|
// // The following is what I got from ChatGPT. I wonder if it doesn't work because it's not registering the service worker correctly.
|
|
//
|
|
// test('Trigger a photo-sharing fetch event in service worker with POST to /share-target', async ({ page }) => {
|
|
// await importUser(page, '00');
|
|
//
|
|
// // Create a FormData object with a photo
|
|
// const photoPath = path.join(__dirname, '..', 'public', 'img', 'icons', 'android-chrome-192x192.png');
|
|
// const photoContent = await fs.readFileSync(photoPath);
|
|
// const [response] = await Promise.all([
|
|
// page.waitForResponse(response => response.url().includes('/share-target')), // also check for response.status() === 303 ?
|
|
// page.evaluate(async (photoContent) => {
|
|
// const formData = new FormData();
|
|
// formData.append('photo', new Blob([photoContent], { type: 'image/png' }), 'test-photo.jpg');
|
|
//
|
|
// const response = await fetch('/share-target', {
|
|
// method: 'POST',
|
|
// body: formData,
|
|
// });
|
|
//
|
|
// return response;
|
|
// }, photoContent)
|
|
// ]);
|
|
//
|
|
// // Verify the response redirected to /shared-photo
|
|
// //expect(response.status).toBe(303);
|
|
// console.log('response headers', response.headers());
|
|
// console.log('response status', response.status());
|
|
// console.log('response url', response.url());
|
|
// expect(response.url()).toContain('/shared-photo');
|
|
// });
|