Page login

๐Ÿ‘จโ€๐Ÿ’ผ We want to test the user 2FA functionality. Go ahead and follow the flow to get a sense for what we're trying to test:
  1. (username: kody, password: kodylovesyou)
  2. Go to
  3. On the settings page,
  4. On the 2FA page,
  5. Scan the QR code with an authentication app (1Password/Google Authenticator). Or, you can check below for an alternative way to get the code.
  6. Paste the code into the input field and click "Submit"
  7. Go back to the page
  8. Click Logout
  9. You should be shown the verification page. Get the latest code and paste it into the input field.
  10. You should be successfully logged in!
Alternative way to get the code
If you can't scan the QR code, create a temporary file and stick this in it:
import { generateTOTP } from '@epic-web/totp'

// put the URL in this string:
const otpUriString = `PASTE_THE_URL_HERE`
// it should start with otpauth://totp/...

const otpUri = new URL(otpUriString)
const options = Object.fromEntries(otpUri.searchParams.entries())

console.log(generateTOTP(options).otp)
Phew! That's a lot of steps! Yeah, but E2E tests are intended to test common user flows. They're less valuable when they're split up into tiny pieces. And luckily for you, we've got Kellie ๐Ÿงโ€โ™‚๏ธ who will do most of this for you if you don't want to do it yourself. That way you can focus most of your attention on the bits you're trying to learn.
Before we can do any of that though, we don't want the test to actually go through the entire onboarding flow. That would be wasteful since we already have a test that verifies that flow. So instead, we're going to programmatically create a user and then log in with that user.
The key bits of this involve:
  1. Create a new user (using your insertNewUser utility)
  2. Create a session for that user (prisma.session.create)
  3. Create a cookie for that session (sessionStorage.getSession)
  4. Get that cookie value from the set-cookie header
  5. Put that cookie value into the page via page.context().addCookies.
Let's talk about step 5 first...
Playwright has an API for setting browser cookies. Here's a quick example:
await page.context().addCookies([
	{
		name: 'theme',
		sameSite: 'Lax',
		domain: 'localhost',
		path: '/',
		value: 'dark',
	},
])
Most of that should look relatively familiar. There are more configuration options you can find in the docs. You want this configuration to match the configuration you have for the cookie in the app. Remember, this is a bit like a mock, so you want to make sure it resembles the real deal as much as possible.
You can set multiple cookies (just more objects in that array).

Parsing the set-cookie header

Alright, let's talk about step 4. Check this out:
const result = await sessionStorage.commitSession(cookieSession)
// result looks something like this: en_session=eyJ2ZXJpZmllZC10aW1lIjoxNjkxNDQ1NDI1NjcwLCJzZXNzaW9uSWQiOiJjbGwxZzF2emIwMDAxcGNqNjkyNTB1ZnRuIn0%3D.%2Fzc%2BhFmBg1wPNiYE5nqS1hcXsZJFZwPrLQUf7BGZD1Q; Path=/; HttpOnly; SameSite=Lax
Then the browser turns that into a Cookie header for its requests. So the browser will just send this bit in the headers:
Cookie: en_session=eyJ2ZXJpZmllZC10aW1lIjoxNjkxNDQ1NDI1NjcwLCJzZXNzaW9uSWQiOiJjbGwxZzF2emIwMDAxcGNqNjkyNTB1ZnRuIn0%3D.%2Fzc%2BhFmBg1wPNiYE5nqS1hcXsZJFZwPrLQUf7BGZD1Q;
So we need to extract that value from the set-cookie header and put it into the browser's Cookie header. There's a library that can help us with this called set-cookie-parser (as the author of a library called "React Testing Library," I must say I approve of this obvious name ๐Ÿ˜†).
import * as setCookieParser from 'set-cookie-parser'

const cookie = setCookieParser.parseString(
	await sessionStorage.commitSession(cookieSession),
)
cookie.name // => en_session
cookie.value // => eyJ2ZXJpZmllZC10aW1lIjoxNjkxNDQ1NDI1NjcwLCJzZXNzaW9uSWQiOiJjbGwxZzF2emIwMDAxcGNqNjkyNTB1ZnRuIn0%3D.%2Fzc%2BhFmBg1wPNiYE5nqS1hcXsZJFZwPrLQUf7BGZD1Q
cookie.sameSite // => Lax
// etc.
๐Ÿ‘จโ€๐Ÿ’ผ Alright, enough with that! Let's go!
You'll just be working in , but you may want to reference for the cookie config and for how to create the session and working with the cookie.
npx playwright test --ui