aws-console-navigator

AWS Console Navigator

Mindset

The CloudWatch console is a micro-frontend SPA embedded inside an iframe (iframe[name="microConsole-Logs"]). This has three non-obvious consequences:

1. window.document is the outer shell, not CloudWatch. All DOM queries must target the iframe's contentDocument. In Playwright, use page.frame({ name: 'microConsole-Logs' }).

2. locator.click() on iframe elements times out. Playwright's locator API hits a 5 s timeout when clicking elements inside cross-origin iframes. Use page.mouse.click(x, y) with coordinates calculated from the iframe bounding box + element's getBoundingClientRect.

3. The results table is its own scroll container. window.scrollBy() scrolls the outer shell. The CloudWatch results table lives in DIV.logs-table__wrapper. Scroll it directly: frame.evaluate(() => document.querySelector('.logs-table__wrapper').scrollTop = N).

When to Use This Skill

• Capturing AWS Console screenshots via Playwright MCP
• Authenticating via SSO and opening a specific account/role
• Getting step-by-step instructions to reach a CloudWatch Logs Insights query, alarm, or metric
• Guiding a user to navigate the console manually

When NOT to Use This Skill

• The target service does not use the microConsole iframe (e.g. S3, EC2) — locator.click() works normally there
• You only need to construct a CloudWatch URL without opening a browser — use aws-cloudwatch-url-builder instead

---

Navigating to CloudWatch Pages

Logs Insights

1. Services → CloudWatch → Logs → Logs Insights
2. Select the log group, paste the query, set the time range (Absolute), click Run query

Direct URL: See aws-cloudwatch-url-builder for the encoded URL template.

Alarms

1. CloudWatch → Alarms → All alarms → search by alarm name → click alarm name
2. Verify which metric is graphed before capturing screenshots

Direct URL:

https://{region}.console.aws.amazon.com/cloudwatch/home?region={region}#alarmsV2:alarm/{alarm_name}