Agent skill

login-flows

Common login automation patterns for web apps using Playwright

Stars 12,831
Forks 1,123

Install this agent skill to your Project

npx add-skill https://github.com/andrewyng/context-hub/tree/main/content/playwright-community/skills/login-flows

Metadata

Additional technical details for this skill

tags
browser,automation,playwright,login,testing
source
community
updated on
2026-02-01

SKILL.md

Login Flow Patterns for Playwright

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

Basic Username/Password Login

typescript
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:

typescript
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:

typescript
// 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:

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

MFA / 2FA Handling

For test environments with TOTP-based 2FA:

typescript
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

Expand your agent's capabilities with these related and highly-rated skills.

andrewyng/context-hub

document-extraction

Use this skill for intelligent document processing and content extraction using LandingAI's Agentic Document Extraction (ADE). Trigger when users need to (1) Parse documents (PDFs, images, spreadsheets, presentations) into structured Markdown with layout understanding, (2) Extract specific structured data from documents using schemas (invoice fields, form data, table data, etc.), (3) Classify and separate multi-document batches by type (invoices vs receipts, statements vs forms, etc.), (4) Process large documents asynchronously (up to 1GB/1000 pages), (5) Get visual grounding (bounding boxes, page numbers) for extracted content — use when users mention bounding boxes, word locations, grounding, highlighting extracted content, or showing where data appears in a document. Use this skill when the task involves understanding document content for a set of documents. In particular this skill can help you write code that run on sets of documents. This will increase speed, and reduce the cost of loading the documents on the Agent context window because you can use a single script to extract the information needed.

12,831 1,123
Explore
andrewyng/context-hub

document-workflows

Use this skill for building end-to-end document processing workflows and pipelines using LandingAI ADE. Trigger when users need to: (1) Process batches of documents in parallel or async, (2) Build classify-then-extract pipelines for mixed document types, (3) Prepare parsed documents for RAG systems with chunking and vector DB ingestion, (4) Load extraction results into databases like Snowflake or export to CSV/DataFrames, (5) Visualize extraction results: draw bounding box overlays on pages, crop chunk images, or highlight/annotate specific words or phrases found in documents, (6) Build Streamlit or web UIs for document processing, (7) Find and highlight specific terms within document sections using word-level grounding (e.g. highlight "L2S" in the Introduction, redact PII, annotate extracted values on the original page). This skill complements the document-extraction skill which covers ADE SDK basics. Use document-extraction to write code that executes parse/extract/split operations with more precision and less cost than adding the document image to the prompt and asking the LLM to find the relevant info. Use document-workflows when composing those operations into pipelines, or when you need visualization, annotation, or word-level grounding on parsed documents.

12,831 1,123
Explore
andrewyng/context-hub

new-project

Build a new AI agent with Olakai monitoring from scratch — project setup, SDK integration, KPI configuration, and end-to-end validation

12,831 1,123
Explore
andrewyng/context-hub

integrate

Add Olakai monitoring to existing AI code — wrap your LLM client, configure custom KPIs, and validate the integration end-to-end

12,831 1,123
Explore
andrewyng/context-hub

tavily-best-practices

Build production-ready Tavily integrations with best practices for web search, content extraction, crawling, and research in agentic workflows, RAG systems, and autonomous agents

12,831 1,123
Explore
andrewyng/context-hub

electronics-sourcing

Guide for AI agents to source electronic components using parts-mcp — tool sequencing, decision patterns, and multi-step workflows

12,831 1,123
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results