corradin

trigger:
  - main
pool:
  vmImage: ubuntu-latest

variables:
  npm_config_cache: $(Pipeline.Workspace)/.npm

steps:
  - task: Cache@2

corradin

import { PlaywrightTestConfig } from '@playwright/test';
import { devices } from 'playwright';
import dotenv from 'dotenv';

dotenv.config();

export const storageStatePath = 'storage-state/storageState.json';

const config: PlaywrightTestConfig = {
  use: {

corradin

import { test as setup } from '@playwright/test';
import { storageStatePath } from './playwright.config';

const username = process.env.MEETUP_USERNAME ?? '';
const password = process.env.MEETUP_PASSWORD ?? '';

setup('Login a user', async ({ page }) => {
  await page.goto('https://www.meetup.com/login');
  await page.getByLabel('Email').fill(username);
  await page.getByLabel('Password', { exact: true }).fill(password);

corradin

import { test as setup } from '@playwright/test';
import { storageStatePath } from './playwright.config';

const username = process.env.MEETUP_USERNAME ?? '';
const password = process.env.MEETUP_PASSWORD ?? '';

setup('Login a user', async ({ page }) => {
  await page.goto('https://www.meetup.com/login');
  await page.getByLabel('Email').fill(username);
  await page.getByLabel('Password', { exact: true }).fill(password);

corradin

import { chromium } from '@playwright/test';
import login from './utils/login';

const username = process.env.MEETUP_USERNAME ?? '';
const password = process.env.MEETUP_PASSWORD ?? '';

async function globalSetup(config: FullConfig): Promise<void> {
  const { storageState } = config.projects[0].use;
  // TODO: Remove headless after this has been tested
  const browser = await chromium.launch({ headless: false });

corradin

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await expect(page).toHaveScreenshot({
    maxDiffPixelRatio: 0.02,
    mask: [page.locator('data-test-id=random-game-image')],
  });
});

corradin

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveScreenshot();
});

corradin

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.02 });
});

corradin

<img data-test-id="random-game-image" src="https://api.lorem.space/image/game?w=250" alt="random-game-poster"/>

corradin

import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.02 });
});