Upgrading to v2

Package

Update your package.json to use ^2.0.0 or run

npm i @liquidlight/playwright-framework@2.0.0

Files

Tests

1. Replace @playwright/test with @liquidlight/playwright-framework
2. Any intance of page.goto() now needs to include a domain/host (Read more about dynamic hosts)

For example:

-import { test, expect } from '@playwright/test';
+import { test, expect } from '@liquidlight/playwright-framework';

test('Language Switcher - Desktop', async({ page }) => {
-	await page.goto('/');
+	await page.goto('https://liquidlight.ddev.site/');
	await page.getByRole('button', { name: 'English' }).click();
	await page.getByRole('link', { name: 'Français' }).click();

	await expect(page.getByRole('button', { name: 'Français' })).toBeVisible();
});

playwright.config.ts

1. Copy the example configuration from the docs into your config file
2. Move the envs object from your site config and pass it into the hosts array in the configuration function
3. If you have overwritten the devices, migrate from the second parameter of framework to inside the first parameter object with a key of devices

Example changes:

• Call configuration & defineConfig from '@liquidlight/playwright-framework' instead of '@playwright/test'
• Pass configuration() to Playwright’s defineConfig()

From v1

-import { defineConfig } from '@playwright/test';
-import { framework } from '@liquidlight/playwright-framework';
+import { configuration, defineConfig } from '@liquidlight/playwright-framework';

-const config = framework([
-	{
-		label: 'Site name',
-		envs: {
			local: 'https://liquidlight.ddev.site',
			production: 'https://www.liquidlight.co.uk',
-		},
-		project: {
-			testDir: './path/to/site/files/'
-		}
-	}
-]);

+export default defineConfig(
+	configuration({
+		hosts: [
+			{
				local: 'https://liquidlight.ddev.site',
				production: 'https://www.liquidlight.co.uk',
+			}
+		]
+	})
+);

From v0

-import { defineConfig } from '@playwright/test';
+import { configuration, defineConfig } from '@liquidlight/playwright-framework';

-const config = require('@liquidlight/playwright-framework')([
-	{
-		label: 'Site name',
-		envs: {
			local: 'https://liquidlight.ddev.site',
			production: 'https://www.liquidlight.co.uk',
-		},
-		project: {
-			testDir: './path/to/site/files/'
-		}
-	}
-]);
-module.exports = defineConfig(config);

+export default defineConfig(
+	configuration({
+		hosts: [
+			{
				local: 'https://liquidlight.ddev.site',
				production: 'https://www.liquidlight.co.uk',
+			}
+		]
+	})
+);

TYPO3

If you are using the typo3Config, include the new typo3site method inside the hosts array and remove the file path. See an exmaple in the docs.

-import { defineConfig } from '@playwright/test';
-import typo3Config from '@liquidlight/playwright-framework/typo3';
+ import { configuration, defineConfig, typo3site } from '@liquidlight/playwright-framework';

-const config = require('@liquidlight/playwright-framework')([
-	typo3Config('liquidlight', './path/to/files')
-]);
-module.exports = defineConfig(config);

+export default defineConfig(
+	configuration({
+	hosts: [
+			typo3site('liquidlight')
+		]
+	})
+);