4.4Install Prompt Testing

The PWA install prompt has strict criteria. Testing that your app meets them ensures users can install it as a native-like app.

test('install prompt appears for eligible users', async ({ page }) => {
    // PWA install criteria: HTTPS, valid manifest, service worker, engagement heuristic
    await page.goto('/');

    // Verify manifest is linked and valid
    const manifestLink = await page.locator('link[rel="manifest"]');
    await expect(manifestLink).toHaveAttribute('href', '/manifest.json');

    // Fetch and validate the manifest
    const manifest = await page.evaluate(async () => {
        const res = await fetch('/manifest.json');
        return res.json();
    });

    expect(manifest.name).toBeTruthy();
    expect(manifest.short_name).toBeTruthy();
    expect(manifest.start_url).toBeTruthy();
    expect(manifest.display).toMatch(/standalone|fullscreen|minimal-ui/);
    expect(manifest.icons.some((i: any) => i.sizes === '512x512')).toBe(true);
    expect(manifest.icons.some((i: any) => i.purpose?.includes('maskable'))).toBe(true);
});

test('manifest has required fields for app stores', async ({ page }) => {
    await page.goto('/');

    const manifest = await page.evaluate(async () => {
        const res = await fetch('/manifest.json');
        return res.json();
    });

    // Required for Google Play Store PWA listing
    expect(manifest.name.length).toBeGreaterThan(0);
    expect(manifest.name.length).toBeLessThanOrEqual(45);
    expect(manifest.short_name.length).toBeLessThanOrEqual(12);
    expect(manifest.description).toBeTruthy();
    expect(manifest.theme_color).toBeTruthy();
    expect(manifest.background_color).toBeTruthy();

    // Must have icons in multiple sizes
    const sizes = manifest.icons.map((i: any) => i.sizes);
    expect(sizes).toContain('192x192');
    expect(sizes).toContain('512x512');
});