Page login

Loading "End to End User Flow Testing and Authentication Utility"

End to End User Flow Testing and Authentication Utility

👨‍💼 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:

Login with a user
(username: kody, password: kodylovesyou)
Go to
/settings/profile
On the settings page,
Click "Enable 2FA"
On the 2FA page,
click "Enable 2FA"
Scan the QR code with an authentication app (1Password/Google Authenticator). Or, you can check below for an alternative way to get the code.
Paste the code into the input field and click "Submit"
Go back to the
/settings/profile
page
Click Logout
Login with the same user
You should be shown the verification page. Get the latest code and paste it into the input field.
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:

Create a new user (using your insertNewUser utility)
Create a session for that user (prisma.session.create)
Create a cookie for that session (sessionStorage.getSession)
Get that cookie value from the set-cookie header
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.