add option to create tests with Playwright (#4056)

* add option to create tests with Playwright

* typo

* Update packages/create-svelte/bin.js

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* fix

* Update packages/create-svelte/bin.js

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

.changeset/green-garlics-warn.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Add option to create integration tests with Playwright

packages/create-svelte/bin.js

@@ -92,6 +92,14 @@ async function main() {
 					initial: false,
 					active: 'Yes',
 					inactive: 'No'
+				},
+				{
+					type: 'toggle',
+					name: 'playwright',
+					message: 'Add Playwright for browser testing?',
+					initial: false,
+					active: 'Yes',
+					inactive: 'No'
 				}
 			],
 			{
@@ -124,6 +132,11 @@ async function main() {
 		console.log(cyan('  https://github.com/sveltejs/prettier-plugin-svelte#options'));
 	}
 
+	if (options.playwright) {
+		console.log(bold('✔ Playwright'));
+		console.log(cyan('  https://playwright.dev'));
+	}
+
 	console.log('\nInstall community-maintained integrations:');
 	console.log(cyan('  https://github.com/svelte-add/svelte-adders'));
 

packages/create-svelte/scripts/update-template-repo-contents.js

@@ -18,5 +18,6 @@ await create(repo, {
 	template: 'default',
 	eslint: false,
 	typescript: false,
-	prettier: true
+	prettier: true,
+	playwright: false
 });

packages/create-svelte/shared/+playwright+default/tests/test.js

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('about page has expected h1', async ({ page }) => {
+	await page.goto('/about');
+	expect(await page.textContent('h1')).toBe('About this app');
+});

packages/create-svelte/shared/+playwright+skeleton/tests/test.js

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
+});

packages/create-svelte/shared/+playwright/package.json

@@ -0,0 +1,8 @@
+{
+	"devDependencies": {
+		"@playwright/test": "^1.19.1"
+	},
+	"scripts": {
+		"test": "playwright test"
+	}
+}

packages/create-svelte/shared/+playwright/playwright.config.js

@@ -0,0 +1,9 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 3000
+	}
+};
+
+export default config;

packages/create-svelte/types/internal.d.ts

@@ -4,14 +4,21 @@ export type Options = {
 	typescript: boolean;
 	prettier: boolean;
 	eslint: boolean;
+	playwright: boolean;
 };
 
 export type File = {
 	name: string;
 	contents: string;
 };
 
-export type Condition = 'eslint' | 'prettier' | 'typescript' | 'skeleton' | 'default';
+export type Condition =
+	| 'eslint'
+	| 'prettier'
+	| 'typescript'
+	| 'playwright'
+	| 'skeleton'
+	| 'default';
 
 export type Common = {
 	files: Array<{