Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add option to create tests with Playwright #4056

Merged
merged 7 commits into from
Feb 23, 2022
Merged

add option to create tests with Playwright #4056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
39363e7
add option to create tests with Playwright
Rich-Harris Feb 22, 2022
42a13f7
typo
Rich-Harris Feb 22, 2022
d70a82b
Update packages/create-svelte/bin.js
Rich-Harris Feb 22, 2022
2f8c846
fix
Rich-Harris Feb 22, 2022
ab5e9b6
Merge branch 'playwright' of github.com:sveltejs/kit into playwright
Rich-Harris Feb 22, 2022
e39a1eb
Update packages/create-svelte/bin.js
benmccann Feb 22, 2022
9e3c8ab
Merge branch 'master' into playwright
Rich-Harris Feb 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/green-garlics-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': patch
---

Add option to create integration tests with Playwright
13 changes: 13 additions & 0 deletions packages/create-svelte/bin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
],
{
Expand Down Expand Up @@ -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'));

Expand Down
3 changes: 2 additions & 1 deletion packages/create-svelte/scripts/update-template-repo-contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ await create(repo, {
template: 'default',
eslint: false,
typescript: false,
prettier: true
prettier: true,
playwright: false
});
6 changes: 6 additions & 0 deletions packages/create-svelte/shared/+playwright+default/tests/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { expect, test } from '@playwright/test';

test('about page has expected h1', async ({ page }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does playwrigt support writing your code in TypeScript? If yes, should we add a variant for TS users?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, playwright does support typescript ootb, down to the playwright config too.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't seem to get it to work. I keep seeing errors like this:

> my-new-app@0.0.1 test /Users/rich/Development/SVELTE/KIT/my-new-app
> playwright test

Error: playwright.config.ts: Cannot import a typescript file from an esmodule.

Am I doing something obviously wrong, or should we add TypeScript stuff in a follow-up PR?

await page.goto('/about');
expect(await page.textContent('h1')).toBe('About this app');
});
6 changes: 6 additions & 0 deletions packages/create-svelte/shared/+playwright+skeleton/tests/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
8 changes: 8 additions & 0 deletions packages/create-svelte/shared/+playwright/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"devDependencies": {
"@playwright/test": "^1.19.1"
},
"scripts": {
"test": "playwright test"
}
}
9 changes: 9 additions & 0 deletions packages/create-svelte/shared/+playwright/playwright.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
webServer: {
command: 'npm run build && npm run preview',
port: 3000
}
};

export default config;
9 changes: 8 additions & 1 deletion packages/create-svelte/types/internal.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down