Writing tests

The smoke spec

Generated smoke tests loop over urlsConfig.markets, call setupPage(), assert the scaffolded button content, and attach a screenshot.

Example:

import { expect, test } from '@playwright/test';
import { buttonText } from '../src/config.js';
import { urlsConfig } from './config.js';
import { experimentContainer, setupPage, takeScreenshot } from './helpers.js';

for (const market of urlsConfig.markets) {
    test.describe(`ExperimentButton [${market.code}]`, () => {
        test('renders the experiment button with correct text', async ({ page }, testInfo) => {
            await setupPage(page, market, testInfo);
            const container = page.locator(experimentContainer);

            await expect(container.locator('button')).toBeVisible();
            await expect(container.locator('button')).toContainText(buttonText);
            await takeScreenshot(page, market.code, 'experiment-button', testInfo);
        });
    });
}

Helpers

setupPage(page, market, testInfo)

setupPage():

1. Opens the market URL.
2. Creates the primary target when it is a missing simple class selector.
3. Injects the loaded dist/v1-index.jsx code.
4. Waits for experimentContainer.
5. Attaches the test URL to the report.

Generated target creation supports selectors such as .target-selector. Customize injectTargetElement() when the primary selector is an attribute, descendant, or other complex selector.

experimentContainer

The current scaffold mounts as the first child of selectors.primary:

export const experimentContainer = `${primarySelector} > div:first-child`;

Use the exported selector instead of assuming the runtime adds a data attribute:

const container = page.locator(experimentContainer);
await expect(container).toBeVisible();

takeScreenshot(page, marketCode, name, testInfo)

Captures the experiment container and attaches the image to the Playwright HTML report:

await takeScreenshot(page, market.code, 'after-render', testInfo);

Run the test for each market

The for...of loop creates one test per market. BENELUX, for example, creates tests for Belgium Dutch, Belgium French, and the Netherlands.

URL configuration

export const urlsConfig = {
    baseUrl: 'https://samsung.com',
    bundlePath: 'dist/v1-index.jsx',
    markets: [{ code: 'UK', urlPath: 'uk', name: 'United Kingdom' }],

    getUrl(marketCode, pagePath) {
        const market = this.markets.find((item) => item.code === marketCode);
        if (!market) throw new Error(`Unknown market: ${marketCode}`);
        const base = this.baseUrl.replace(/\/$/, '');
        return `${base}/${market.urlPath}${pagePath}`;
    },
};

Change the page path in setupPage() when the experiment belongs to a route other than /.

Add experiment assertions

test(`price renders - ${market.name}`, async ({ page }, testInfo) => {
    await setupPage(page, market, testInfo);

    const container = page.locator(experimentContainer);
    const price = container.locator('[class*="price"]');
    await expect(price).toBeVisible();
    await expect(price).not.toBeEmpty();
});

Keep assertions scoped to the injected container so unrelated host-page changes do not make the test noisy.