Menu
Browser automation with web-agent-mcp. Covers session management, iframe-based auth flows (Apple Developer, Google), 2FA handling, and reliable interaction patterns for complex web applications.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.
Build high-quality image generation and edit prompts from user intent using prompt structures proven across prompts.chat examples and OpenAI image prompting guidance.
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
| name | web-agent-browser |
| description | Browser automation with web-agent-mcp. Covers session management, iframe-based auth flows (Apple Developer, Google), 2FA handling, and reliable interaction patterns for complex web applications. |
Use this skill for browser automation tasks using web-agent-mcp. Covers the proven patterns for interacting with embedded iframes, auth flows, 2FA prompts, and dynamic SPAs.
session_create, act_fill, observe_screenshot, etc.)1. session_create → get session_id
2. page_navigate (url, wait_until="networkidle")
3. observe_screenshot → understand page state
4. interact (act_fill / act_click / runtime_evaluate_js)
5. session_close when done
Always take a screenshot before interacting. Never guess the page state.
act_fill:
selector: "input#account_name_text_field"
frame_selector: "iframe#aid-auth-widget-iFrame"
value: "user@example.com"
Works for iframes Playwright can access via frameLocator().
Use when frame_selector times out. Apple Developer's login iframe (idmsa.apple.com) is accessible via contentDocument in the same browser session:
// Fill email in Apple iframe
const iframe = document.querySelector('iframe#aid-auth-widget-iFrame');
const emailInput = iframe.contentDocument.querySelector('#account_name_text_field');
emailInput.focus();
emailInput.value = 'user@example.com';
emailInput.dispatchEvent(new Event('input', { bubbles: true }));
emailInput.dispatchEvent(new Event('change', { bubbles: true }));
// Click Continue / Sign In button
const iframe = document.querySelector('iframe#aid-auth-widget-iFrame');
const btn = iframe.contentDocument.querySelector('#sign-in');
btn.click();
// Wait and check state
await new Promise(r => setTimeout(r, 3000));
const iframe = document.querySelector('iframe#aid-auth-widget-iFrame');
const passwordField = iframe.contentDocument.querySelector('#password_text_field');
JSON.stringify({
passwordVisible: passwordField ? getComputedStyle(passwordField).display !== 'none' : false,
bodyText: iframe.contentDocument.body.innerText.substring(0, 500)
});
URL: https://developer.apple.com/account
Login flow:
page_navigate → https://developer.apple.com/accountobserve_screenshot — verify login form visible#account_name_text_field#sign-in (Continue button)#password_text_field#sign-in (Sign In button)Iframe selector: iframe#aid-auth-widget-iFrame
Email field: #account_name_text_field
Password field: #password_text_field
Action button: #sign-in (used for both Continue and Sign In)
After sign-in, Apple shows phone number selection for SMS code:
observe_screenshot to see the 2FA optionsact_enter_code or runtime_evaluate_js to fill the code fields// Check current URL and key elements
JSON.stringify({
url: window.location.href,
title: document.title,
hasError: !!document.querySelector('.error, [role="alert"], .alert-error'),
errorText: document.querySelector('.error, [role="alert"]')?.textContent?.trim()
});
const input = document.querySelector('input#myField');
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
nativeInputValueSetter.call(input, 'new value');
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
document.querySelector('a[href*="SignOutOptions"], [aria-label*="Google Account"], [data-ogsr-up]')?.getAttribute('aria-label') || 'not logged in';
observe_screenshot before each major action to confirm page state.frame_selector times out, switch to JavaScript contentDocument injection.session_close after completing the task to release the Chrome profile lock.