CtrlK
BlogDocsLog inGet started
Tessl Logo

login-flows

Common login automation patterns for web apps using Playwright

67

Quality

60%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Risky

Do not use without reviewing

Optimize this skill with Tessl

npx tessl skill review --optimize ./content/playwright-community/skills/login-flows/SKILL.md
SKILL.md
Quality
Evals
Security

Login Flow Patterns for Playwright

Reusable patterns for automating login flows in end-to-end tests.

Basic Username/Password Login

import { Page } from '@playwright/test';

async function login(page: Page, username: string, password: string) {
  await page.goto('/login');
  await page.fill('[name="username"]', username);
  await page.fill('[name="password"]', password);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

OAuth / SSO Login

For OAuth flows that redirect to an external provider:

async function loginWithOAuth(page: Page) {
  await page.goto('/login');
  await page.click('text=Sign in with Google');

  // Handle the OAuth popup or redirect
  await page.fill('input[type="email"]', process.env.TEST_EMAIL!);
  await page.click('text=Next');
  await page.fill('input[type="password"]', process.env.TEST_PASSWORD!);
  await page.click('text=Next');

  // Wait for redirect back to app
  await page.waitForURL('**/dashboard');
}

Persisting Auth State (storageState)

Avoid logging in before every test by saving and reusing browser state:

// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('/login');
  await page.fill('[name="username"]', 'testuser');
  await page.fill('[name="password"]', 'testpass');
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: './auth.json' });
  await browser.close();
}

export default globalSetup;

Then in playwright.config.ts:

export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    storageState: './auth.json',
  },
});

MFA / 2FA Handling

For test environments with TOTP-based 2FA:

import { authenticator } from 'otplib';

async function loginWithMFA(page: Page, secret: string) {
  await login(page, 'user', 'pass');

  // Generate TOTP code
  const code = authenticator.generate(secret);
  await page.fill('[name="totp"]', code);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

Tips

  • Always use storageState to avoid repeated logins — it's the single biggest speedup for E2E suites
  • Use environment variables for credentials, never hardcode them
  • For CI, consider a dedicated test user with stable credentials
  • Use page.waitForURL() instead of arbitrary waitForTimeout() after login
Repository
andrewyng/context-hub
Commit

eeb895b

Last updated
Created

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill