Guide · Agent skill
How to use the Playwright Login Flows agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The login-flows skill is a reference guide that teaches an AI agent standard ways to script logins in Playwright, a browser-automation tool used for end-to-end tests. This guide explains what the skill changes, how to install it, how to ask for help so the agent uses it, and what to check before you run the code. By the end you will know which login pattern fits your test suite and how to keep test credentials safe.
Playwright Login Flowsandrewyng/context-hub · MIT Download the skill Quick start
- 1Download and unzip the skill. Download the ZIP from this page and unzip it to get SKILL.md.
- 2Place it in a skills folder. Move the unzipped folder into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Set up your Playwright project. Make sure you have a Node.js and TypeScript project with @playwright/test, and add otplib if you need the 2FA example.
- 5Store test credentials in environment variables. Supply the test account's username and password through environment variables, not in code.
- 6Ask for the login pattern you need. Describe the login type, such as username/password, SSO, saved session or TOTP, and the URLs involved.
- 7Review and run the code. Check the generated selectors and secrets handling, then run the tests against a test environment.
What the login-flows skill makes the agent do
An agent skill is a folder with a SKILL.md file that the agent reads when a request matches its description. This one covers common login automation patterns for web apps using Playwright. When it applies, the agent can draw on ready-made code for four situations: a basic username and password form, an OAuth or SSO redirect to a provider such as Google, reusing a saved signed-in session through storageState, and entering a time-based one-time code for two-factor authentication.
- Username/password login: fills the fields, submits the form and waits for the dashboard URL.
- OAuth / SSO login: clicks a 'Sign in with Google' style button, fills the provider's email and password fields, then waits for the redirect back to the app.
- Persisting auth state: logs in once in a global setup step, saves the state to ./auth.json, and loads it for later tests.
- MFA / 2FA handling: generates a TOTP code with the otplib package and enters it into the form.
Install the login-flows skill
Download the ZIP from this page and unzip it. The skill is a single file, SKILL.md. You can install it in one of two places. For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder so it applies only there.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: ~/.claude/skills/ (available across your projects).
- Project install: .claude/skills/ inside your project folder (available only in that project).
- Claude apps: Settings → Capabilities → Skills, then upload the skill.
Check the requirements before you start
The patterns assume a Node.js and TypeScript project with Playwright (@playwright/test) installed. The MFA example also needs the otplib package. You also need a test account, and its credentials should be supplied through environment variables rather than typed into code.
The skill does not run scripts and does not use the network. It only gives the agent code to read and adapt. You still run the tests yourself.
- Node.js and a TypeScript project
- Playwright (@playwright/test)
- otplib, only for the TOTP/2FA example
- A test account, with credentials in environment variables
How to trigger the skill with natural requests
You do not need a special command. Describe the login task in your test project and mention what you need. The agent will match the request to the skill when it concerns logging into a web app in an automated test. Mention the kind of login you have so the agent picks the right pattern.
Good requests name the login type, the page URLs, and where the credentials come from.
- 'Write a Playwright login helper for our /login form that waits for /dashboard after sign-in.'
- 'Set up global setup so our E2E tests reuse a signed-in session instead of logging in each time.'
- 'Add a Google SSO login to our Playwright test using TEST_EMAIL and TEST_PASSWORD from environment variables.'
- 'Our staging account has TOTP 2FA. Add a login step that generates the code from a secret in an env variable.'
Example: reuse a saved session with storageState
This is the pattern the guide calls the biggest speedup for E2E suites. A global setup file logs in once, saves the browser state, and the Playwright config loads that file for every test. The example saves to ./auth.json, so protect that file as you would a password.
- Create global-setup.ts with the login steps and a call to context().storageState({ path: './auth.json' }).
- Add globalSetup and use.storageState to playwright.config.ts.
// playwright.config.ts
export default defineConfig({
globalSetup: './global-setup.ts',
use: {
storageState: './auth.json',
},
});Safety notes before you run the code
The examples store test passwords in code and in a saved auth.json file. Use them only for test environments and accounts you own or are allowed to test. Automating logins to sites you do not own or have permission to test may violate their terms of service. The skill is not meant for production accounts with real credentials.
The sample global setup hardcodes 'testuser' and 'testpass'. Replace these with environment variables before committing anything, and keep auth.json out of version control.
- Use environment variables for credentials, never hardcoded values.
- Keep auth.json out of git and treat it as sensitive.
- For CI, consider a dedicated test user with stable credentials.
- Use page.waitForURL() rather than arbitrary waitForTimeout() after login.
Tips for getting good results
Ask the agent to adapt selectors to your app. The examples use names such as [name="username"] and text=Next, which will often differ from your real markup. Review the generated code before running it against any environment that matters.
- Always use storageState to avoid repeated logins.
- Tell the agent your real selectors and URLs so it does not guess.
- Read the generated code and confirm no secrets are hardcoded.
What people use it for
- Writing a reusable login helper for a username/password form in an end-to-end test suite.
- Speeding up a test run by saving a signed-in state once and reusing it across tests.
- Scripting a Google-style SSO redirect for a test account in a staging app.
- Adding a TOTP code step to tests for a test environment that uses two-factor authentication.
- Setting up CI test accounts that read credentials from environment variables.
Frequently asked questions
Is the login-flows skill free to use?
The skill is released under the MIT licence, as stated on this page. Playwright and the otplib package are separate tools, so check their own licences before you use them in your project.
What do I need to install before using login-flows?
You need a Node.js and TypeScript project with Playwright (@playwright/test) installed. The TOTP example also needs the otplib package, and you need a test account with credentials in environment variables.
Where do I put the skill so the agent finds it?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings, then Capabilities, then Skills.
Does the skill run code or access the internet?
No. The skill runs no scripts and uses no network. It is a SKILL.md reference that the agent reads to write code, and you run the tests yourself.
Can I use this to log into a production site or a site I do not own?
No, that is not what it is for. The examples store test passwords in code and a saved auth.json file, and automating logins to sites you do not own or have permission to test may violate their terms of service.
What are the alternatives if this skill does not fit?
The skill only provides code patterns that a developer must run. If you want a ready-made tool rather than code to adapt, this skill is not the right fit. Playwright's own documentation covers login and storageState in more depth.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use login-flows if you are a developer or QA engineer writing end-to-end tests for a web app that requires login and you want an agent to write the boilerplate for forms, SSO, saved sessions or TOTP. Skip it if you need a ready-made tool, want to automate logins to sites you do not own or have permission to test, or plan to use real production credentials.
Download the skill