Playwright Page Objects
bartstc/vite-ts-react-template
A skill your agent uses when creating page objects or refactoring Playwright E2E tests for better maintainability with Page Object Model patterns.
Guides writing and fixing end-to-end flow tests for the Keybase app on desktop with Playwright and on iOS with Appium and WebdriverIO, sharing one testID registry.
Install Keybase E2E Flow Tests
$ npx skills add keybase/client --skill keybase-e2e-tests -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install keybase/client keybase-e2e-tests --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/keybase-e2e-tests .claude/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .claude/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/keybase/client/tree/master/skill/keybase-e2e-testsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add keybase/client --skill keybase-e2e-tests -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install keybase/client keybase-e2e-tests --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skill/keybase-e2e-tests .agents/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .agents/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill keybase-e2e-tests -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install keybase/client keybase-e2e-tests --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skill/keybase-e2e-tests .cursor/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .cursor/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/keybase/client.git --path skill/keybase-e2e-tests--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add keybase/client --skill keybase-e2e-tests -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install keybase/client keybase-e2e-tests --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skill/keybase-e2e-tests .gemini/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .gemini/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install keybase/client keybase-e2e-testsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add keybase/client --skill keybase-e2e-tests -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .github/skills && cp -r skills-src/skill/keybase-e2e-tests .github/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .github/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add keybase/client --skill keybase-e2e-tests -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install keybase/client keybase-e2e-tests --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/keybase/client.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skill/keybase-e2e-tests .opencode/skills/keybase-e2e-tests && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "keybase-e2e-tests" agent skill from https://github.com/keybase/client/tree/master/skill/keybase-e2e-tests into .opencode/skills/keybase-e2e-tests/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "keybase-e2e-tests", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
keybase-e2e-tests- GitHub stars
- 9.3k
- Token cost
- ~1.2k tokens
- SKILL.md length
- 487 words
- Files
- 1
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
Guides writing and fixing end-to-end flow tests for the Keybase app on desktop with Playwright and on iOS with Appium and WebdriverIO, sharing one testID registry.
- Adding an end-to-end flow test for a Keybase screen on desktop and iOS
- SKILL.md covers Overview, Shared testID Registry, Desktop — Playwright and iOS — Appium + WebdriverIO…
- Calls yarn
- Fixing a Playwright strict-mode failure caused by hidden navigation elements
What it does
Keybase keeps two test harnesses that share one registry of testID values in shared/tests/e2e/shared/test-ids.ts, and each flow is meant to be implemented on Electron and iOS together. A testID goes on an element that already exists, never on a new container created only to hold it. Desktop flows live in shared/tests/e2e/electron/flows, with navigation helpers such as navigateToChat and navigateToSettings.
A common pitfall is that React Navigation keeps earlier screens mounted but hidden, so getByTestId can match more than one element and trip Playwright's strict mode; the fix is a selector unique to the destination screen. iOS flows sit under shared/tests/e2e/ios-appium and are aggregated into one session, run with yarn test:e2e:ios for iPhone and iPad in parallel or with per-device scripts, with KB_SMOKE_USER set, and a report command reads the debug results.
When your agent uses it
- Adding an end-to-end flow test for a Keybase screen on desktop and iOS
- Fixing a Playwright strict-mode failure caused by hidden navigation elements
- Registering a new testID and attaching it to an existing component
- Running iOS Appium flows on iPhone and iPad and reading the report
Example prompts
- “Write a desktop and iOS flow test for the Settings advanced screen using the shared testID registry.”
- “My getByTestId matches two elements after navigating into a Files subfolder, so fix the selector.”
- “Run the iOS flows on the iPad simulator only and show me the report.”
Requirements
- Yarn with the repository's e2e scripts
- Playwright for desktop runs
- Appium and WebdriverIO with iPhone and iPad simulators for iOS runs
What it can do on your machine
Read from SKILL.md and the folder at commit 81e93d6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Keybase E2E Flow Tests loads about 1.2k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 487 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from keybase/client at commit 81e93d6, republished under its BSD-3-Clause licence (© keybase). 487 words, ~1,153 tokens.
Download SKILL.mdSave it as
.claude/skills/keybase-e2e-tests/SKILL.md (or your agent's skills folder).- name
- keybase-e2e-tests
- description
- Use when writing, fixing, or adding e2e flow tests for the Keybase app — desktop (Playwright) or iOS (Appium + WebdriverIO). Covers testID conventions, navigation patterns, common pitfalls, and the two-harness structure.
Keybase E2E Flow Tests
Overview
Two harnesses, one shared testID registry. Implement each flow on Electron and iOS together.
Shared testID Registry
shared/tests/e2e/shared/test-ids.ts — single source of truth for all testID values.
Adding a testID to a component:
import * as TestIDs from '@/tests/e2e/shared/test-ids'
// ...
<Kb.ScrollView testID={TestIDs.SETTINGS_ADVANCED}>Rule: Add testID prop to an already-existing element (input, scroll view, pre-existing wrapper). Never add a new container just to attach a testID.
Desktop — Playwright
| What | Where |
|---|---|
| Test files | shared/tests/e2e/electron/flows/*.test.ts |
| Nav helpers | shared/tests/e2e/electron/helpers/navigate.ts |
| Run all | yarn test:e2e:desktop |
| Run branch | yarn test:e2e:desktop:branch |
Navigation helpers: navigateToChat, navigateToFiles, navigateToTeams, navigateToGit, navigateToSettings, navigateToPeople, navigateToCrypto, navigateToDevices
Common pitfall — hidden nav stack elements: React Navigation keeps prior screens mounted but hidden. getByTestId(X) may match 2+ elements (one hidden, one visible), causing Playwright strict-mode failures. Fix: use a selector unique to the destination screen rather than one shared with the source screen. Example: after navigating into a Files subfolder, the root screen's files-browser is still in the DOM but hidden — check for the Filter textbox instead, which only exists in subfolder views.
iOS — Appium + WebdriverIO (TypeScript)
| What | Where |
|---|---|
| Flow files | shared/tests/e2e/ios-appium/flows/*.test.ts |
| Helpers | shared/tests/e2e/ios-appium/helpers/ (elements, navigate, app) |
| Aggregate spec | shared/tests/e2e/ios-appium/all.test.ts (imports all flows → ONE session) |
| Config | shared/tests/e2e/ios-appium/wdio.conf.ts |
| Run both devices | KB_SMOKE_USER=<user> yarn test:e2e:ios (iPhoneTest + iPadTest in PARALLEL; app installed on both) |
| Run one device | KB_SMOKE_USER=<user> yarn test:e2e:ios:iphone / yarn test:e2e:ios:ipad (serial runner, shuts down other sims) |
| Report | yarn test:e2e:ios:report (reads ONLY tests/results/ios-appium-debug-{iphone,ipad}; each run overwrites its device's dir; per-image timestamps show when each device last ran) |
Drives the already-installed app black-box (no rebuild). Selectors: ~<testID> (testID → iOS accessibilityIdentifier). Helpers: el/els/waitForTestID/byText/tab (elements), escapeToTabs/goBack/navigateTo*/scrollDownToText (navigate). escapeToTabs runs before every test (resets to the tab root).
Gotchas (hard-won — read before adding flows):
- Native tab bar: tap tabs by label (
tab('People')→~People), NOTnav-tab-*testIDs — those don't reach the nativeUITabBar. - Container testIDs (a flex
Kb.Box2wrapping a list) reportvisible="false"to XCUITest even when on screen → usewaitForTestID(it useswaitForExist, presence), nevertoBeDisplayed. - testIDs must be on the MOBILE-rendered element. Many components branch on
isMobile/.desktop/.native; a desktop-only testID is invisible on iOS, so a flow that waits on it passes on desktop while testing nothing on iOS. Put the testID on the clickable/leaf element (e.g.Kb.ListItem'stestID, aClickableBox), not a non-clickable wrappingBox2— wdio.click()no-ops on a non-accessible container. byTextuses CONTAINS — tappable rows have merged accessibility labels (e.g.", Crypto"), so exact match fails.Kb.Tabssupports a per-tabtestID(needed for icon-only tabs like the team Settings gear). The app remembers the last-selected team tab → select tabs by testID, don't assume the default.- Modals: dismiss via Done/Close/Cancel (
escapeToTabsdoes this first, before back buttons — a modal's back button is a no-op that loops). - HMR applies testID/component changes to the running sim app — no manual reload needed when adding testIDs.
- Wait for a real data row (not just the list container) before asserting/screenshotting, so shots show loaded content.
Show full SKILL.md (22 more words)Show less
iOS tab structure: People & Teams are direct tabs; Chat & Files have their own nav helpers; Crypto/Devices/Git/Settings live under the More tab (navigateToMore).
© keybase, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skill/keybase-e2e-tests of keybase/client.
Open the folder on GitHubat commit 81e93d6
Compare with similar skills
Keybase E2E Flow Tests next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Keybase E2E Flow Tests this skillkeybase/client | 9.3k | — | ~1.2k | Automated safety check: Pass | BSD-3-Clause | |
| Playwright Page Objectsbartstc/vite-ts-react-template | 122 | — | ~1k | Automated safety check: Notes | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~843 | Automated safety check: Pass | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~692 | Automated safety check: Pass | MIT | |
| Simulator Audio E2Ehyochan/react-native-nitro-sound | 961 | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW, Vitest, and Playwright when present.
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
Simulator Audio E2E
hyochan/react-native-nitro-sound
Build and run repeatable react-native-nitro-sound recorder/player regression tests on an iOS Simulator or Android emulator, with explicit virtual-device selection, microphone permission, Maestro…
E2E Matrix Runner
hyodotdev/openiap
Run the full OpenIAP device matrix — six frameworks across iOS, Google Play, Amazon Appstore, Meta Horizon, and VegaOS — driving real hardware over adb and xcrun, and report one row per cell with…
More from keybase/client
All 14 skills in this repoElectron Heap Snapshot Analysis
keybase/client
Analyzes V8, Chrome and Electron .heapsnapshot files with Node scripts to find memory leaks, detached DOM nodes and the retainer paths that keep objects alive.
Electron DevTools Trace Analysis
keybase/client
Analyzes Chrome or Electron DevTools Performance trace exports with Python scripts to find where render time actually goes, without opening DevTools.
Keybase RPC Log Analysis
keybase/client
Captures a clean Keybase service log and analyzes it for redundant, duplicated or looping RPCs, then checks whether a caching fix reduced the calls.
React DevTools Profile Analyzer
keybase/client
Parses a React DevTools Profiler JSON export with Python scripts to find re-render storms, commit fan-out and why a component rendered, without opening the DevTools UI.
Address PR Feedback
keybase/client
Fetches GitHub Copilot review feedback from inline threads and review bodies, checks each finding against the code and fixes the valid ones.
Electron App Screenshot
keybase/client
Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.
Related
Works with
Categories
Questions about Keybase E2E Flow Tests
What does Keybase E2E Flow Tests do?
Guides writing and fixing end-to-end flow tests for the Keybase app on desktop with Playwright and on iOS with Appium and WebdriverIO, sharing one testID registry. ts, and each flow is meant to be implemented on Electron and iOS together. A testID goes on an element that already exists, never on a new container created only to hold it.
When should I use Keybase E2E Flow Tests?
Keybase E2E Flow Tests fits situations like: adding an end-to-end flow test for a Keybase screen on desktop and iOS; fixing a Playwright strict-mode failure caused by hidden navigation elements; registering a new testID and attaching it to an existing component; running iOS Appium flows on iPhone and iPad and reading the report.
How do I install Keybase E2E Flow Tests in Claude Code?
Run `npx skills add keybase/client --skill keybase-e2e-tests -a claude-code`. Or copy the skill folder (skill/keybase-e2e-tests in keybase/client) into .claude/skills/keybase-e2e-tests in your project. Claude Code loads it when a task matches its description.
How do I install Keybase E2E Flow Tests in Codex?
Run `npx skills add keybase/client --skill keybase-e2e-tests -a codex`. Or copy the skill folder (skill/keybase-e2e-tests in keybase/client) into .agents/skills/keybase-e2e-tests in your project. Codex loads it when a task matches its description.
Can I use Keybase E2E Flow Tests in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add keybase/client --skill keybase-e2e-tests -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/keybase-e2e-tests, .gemini/skills/keybase-e2e-tests, .github/skills/keybase-e2e-tests and .opencode/skills/keybase-e2e-tests in your project.
What does Keybase E2E Flow Tests need to run?
Going by SKILL.md and its folder, Keybase E2E Flow Tests needs the command-line tools its instructions call (yarn). Our summary lists: Yarn with the repository's e2e scripts; Playwright for desktop runs; Appium and WebdriverIO with iPhone and iPad simulators for iOS runs.
Does Keybase E2E Flow Tests access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Keybase E2E Flow Tests safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Keybase E2E Flow Tests use?
Keybase E2E Flow Tests is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Keybase E2E Flow Tests use?
About 1.2k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Keybase E2E Flow Tests?
Skills that share tags, products or a category with Keybase E2E Flow Tests: Playwright Page Objects (bartstc/vite-ts-react-template, 122 stars), Frontend Typescript Testing (shinpr/ai-coding-project-boilerplate, 232 stars), Frontend Typescript Testing (shinpr/ai-coding-project-boilerplate, 232 stars) and Frontend Typescript Testing (shinpr/ai-coding-project-boilerplate, 232 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Keybase E2E Flow Tests?
keybase (a GitHub organization) maintains it in keybase/client, which has 9,257 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.
Source: keybase/client on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.