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

Please set the playground first

Loading "Page login"
Loading "Page login"
Login to get access to the exclusive discord channel.
  • general
    Modals / Dialogs
    Lucas Wargha πŸš€ 🌌:
    It seems like modals and dialogs are becoming a hot topic on my team lately. I haven’t found a solid...
    3 Β· 5 days ago
  • πŸ§ͺfull stack testing
    Unable to use `screen.logTestingPlaygroundURL()` and `screen.debug()` on ErrorList component test
    oaguinaga 🌌 πŸš€:
    Hi, I'm currently going through the `Component Testing / Cleanup` section of the testing module, and...
    1 Β· 8 days ago
  • πŸ§ͺfull stack testing
    E2E Mocking "Write Email" Problem - SyntaxError: app\components\ui\icons\sprite.svg
    Juan πŸ† 🌌:
    Hello, I am encountering an issue while working on the "Full Stack Testing Workshop," specifically ...
    • βœ…1
    2 Β· a month ago
  • general
    epic stack website initial load at home page is unstyled (sometimes)
    osmancakir πŸš€ 🌌:
    Sometimes (especially when it is loaded first time on a new browser etc.) I see this unstyled versio...
    • βœ…1
    10 Β· 3 months ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    86 Β· 2 years ago
  • general
    Resource / Api endpoints on epic stack / RR7
    Lucas Wargha πŸš€ 🌌:
    Hi everyone! Quick question for those using the Epic Stack: How are you handling resource routes ...
    • βœ…1
    2 Β· 2 months ago
  • general
    Epic stack using tanstack form
    Lucas Wargha πŸš€ 🌌:
    https://github.com/epicweb-dev/epic-stack/compare/epicweb-dev:main...wargha:feature/tanstack-form-ex...
    • βœ…1
    3 Β· 2 months ago
  • general
    Init command outdated on the EpicWeb website
    Virgile πŸ† 🌌:
    Hi everyone. I've initialized a new epic-stack project yesterday. Following instructions from http...
    • βœ…1
    3 Β· 3 months ago
  • general
    Mark as complete, resets the first time you click it.
    Daniel V.C πŸš€ 🌌:
    Not sure if anyone else has had this issue, as i've not seen anyone else talk about it, but I find ...
    • βœ…1
    8 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· a year ago
  • general
    Keeping Epic Stack Projects Free on Fly – Any Tips?
    Lucas Wargha πŸš€ 🌌:
    I’ve been experimenting with the Epic Stack and deploying some dummy projects on Fly. I noticed that...
    • βœ…1
    0 Β· 3 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    Creating Notes
    Scott 🌌 πŸ†:
    Does anybody know in what workshop we create notes? I would like to see the routing structure. So fa...
    • βœ…1
    2 Β· 5 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Thank you for the inspiration
    Binalfew πŸš€ 🌌:
    <@105755735731781632> I wanted to thank you for the incredible knowledge I gained from your Epic Web...
    • ❀️1
    1 Β· 6 months ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 8 months ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 10 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· 2 years ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· 2 years ago
  • πŸ§ͺfull stack testing
    Failing tests in full-stack-testing workshop
    Szabolcs 🌌:
    I am getting this warning in the testing workshop. ``` Warning: `ReactDOMTestUtils.act` is deprecate...
    • βœ…1
    2 Β· a year ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· a year ago