ARIA ロールは、コンテンツに意味づけ行い、スクリーンリーダーなどのツールが、その種類のオブジェクトに対するユーザーの期待に一致する方法でオブジェクトを表示し、操作に対応できるようにします。 ARIA ロールは、 HTML にネイティブに存在しない要素や、存在しててもブラウザーの完全な対応がまだない要素を記述するために使用することができます。
Chrome Dev Tools からもページがどのようなアクセシビリティツリーとなっているかを確認出来ます。
Playwright でアクセシビリティツリーを取得し、論理的な意味を持つという側面をテストに応用するという試みが ARIA Snapshots です。
YAML 形式で取得されたアクセシビリティツリーのスナップショットを比較することで、UI の変更や影響範囲を検出する仕組みです。
body内の ARIA Snapshot を取得してテスト
await expect(page.locator('body')).toMatchAriaSnapshot(`
- heading "title"
`);
従来の locator を指定しての DOM アサーションでは、特定のHTML要素の存在、テキスト内容、属性の値などをチェックします。しかし、複雑な構造に対してアサーションを行うことやコンポーネント全体をメンテナンスしていくことが難しい場合があります。
ARIA Snapshots は、要素の論理構造（たとえば見出しやリスト、リンクといった構成要素）を YAML 構造に反映することで、変更箇所をより具体で明確に把握できる点においてメリットがあります。
h1タグをロケータ指定でテスト
await expect(page.locator('h1')).toHaveText('title');
ビジュアルリグレッションテストは、UI 外観そのものを実環境でレンダリングし、確認と変化の検知が可能です。一方、スタイル変更で常にテストの更新が必要になることや、実行時間と金銭的なコストがかかる面があります。
ARIA Snapshots は実行コストが低く、コンポーネント単位でツリー構造やコンテンツの論理的な一貫性を担保するテストが可能になります。
HTML 論理構造の変更からコンテンツのリグレッションを検知し、全てのユーザーに提供する Web ページのアクセシビリティ面での品質を考えるのに今後重要な機能です。
Playwright API や使い方はシンプルなので、公式ページにゆずります。
MCP については、最新の多くの記事や以前書いたものにゆずります。
ブラウザ操作を目的として、LLM モデルに Playwright をツールとして認識させる MCP サーバーが、2025年3月に Playwright から公式にリリースされました（3rd party 製のものは以前からありました）。
個人的に注目したのは、2種類の Tool Modes を備えている点です。
この 1. Snapshot Mode (default) は、DOM ではなく AOM（前章のアクセシビリティツリー）をモデルに認識させています。マルチモーダルなLLMモデル前提で、Vision（つまりスクリーンショット）よりも安定性やパフォーマンスが優れていることは想像出来ます。
また、vs DOM としてはより論理的なページ情報にフォーカスすることで、トークン数やノイズになる情報を省ける効果が見込めます。
一方で、精度というか自然言語ベースの指示からツール実行が思った通りに出来るかは、一概には言えない部分です。そもそもアクセシビリティに配慮できていないウェブサイトでは、LLM に渡す情報が抜け落ちていること（実装者依存が大きい）や視覚的な強調を（スタイルなどによって）行っているなら、スクリーンショットを利用する、もしくはハイブリッドも手段としてありえます。
Cursorからの実行
- link "Skip to content" [ref=s1e7]:
- /url: "#start-of-content"
- alert "Announcement" [ref=s1e12]:
- text: GitHub Copilot is now available for free.
- link "Learn more" [ref=s1e14]:
- /url: https://github.com/features/copilot/?utm_source=github&utm_medium=banner&utm_campaign=copilotfree-bannerheader
- button "Close" [ref=s1e16]
- banner [ref=s1e18]:
- heading "Navigation Menu" [level=2] [ref=s1e19]
- link "Homepage" [ref=s1e23]:
- /url: /
- navigation "Global" [ref=s1e27]:
- list [ref=s1e28]:
- listitem [ref=s1e29]:
- button "Product" [ref=s1e30]
- listitem [ref=s1e31]:
- button "Solutions" [ref=s1e32]
- listitem [ref=s1e33]:
- button "Resources" [ref=s1e34]
- listitem [ref=s1e35]:
- button "Open Source" [ref=s1e36]
- listitem [ref=s1e37]:
- button "Enterprise" [ref=s1e38]
- listitem [ref=s1e39]:
- link "Pricing" [ref=s1e40]:
- /url: https://github.com/pricing
- button "Search or jump to…" [ref=s1e44]
- link "Sign in" [ref=s1e51]:
- /url: /login
- link "Sign up" [ref=s1e52]:
- /url: /signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home
- main [ref=s1e56]:
- region "Build and ship software on a single, collaborative platform" [ref=s1e65]:
- heading "Build and ship software on a single, collaborative platform"
[level=1] [ref=s1e69]
- paragraph [ref=s1e70]: Join the world’s most widely adopted AI-powered developer platform.
- form "Sign up for GitHub" [ref=s1e72]:
- text: Enter your email
- textbox "Enter your email" [ref=s1e78]
- button "Sign up for GitHub" [ref=s1e79]
- link "Try GitHub Copilot" [ref=s1e82]:
- /url: /features/copilot
- heading "GitHub features" [level=2] [ref=s1e86]
- button "Pause demo" [ref=s1e91]
- text: A demonstration animation of a code editor using GitHub Copilot Chat,
where the user requests GitHub Copilot to refactor duplicated logic and
extract it into a reusable function for a given code snippet.
- tablist [ref=s1e102]:
- tab "Code" [ref=s1e108]
- tab "Plan" [ref=s1e110]
- tab "Collaborate" [ref=s1e112]
- tab "Automate" [ref=s1e114]
- tab "Secure" [ref=s1e116]
- region [ref=s1e118]: Build code quickly and more securely with GitHub Copilot
embedded throughout your workflows.
- heading "GitHub is used by" [level=2] [ref=s1e121]
- img "Shopify" [ref=s1e125]
- img "EY" [ref=s1e126]
- img "Figma" [ref=s1e127]
- img "Duolingo" [ref=s1e128]
- img "New York Times" [ref=s1e129]
- img "Mercado Libre" [ref=s1e130]
- img "American Airlines" [ref=s1e131]
- img "Ford" [ref=s1e132]
- img "Mercedes Benz" [ref=s1e133]
- img "Société Générale" [ref=s1e134]
- img "Vodafone" [ref=s1e135]
- img "Philips" [ref=s1e136]
- img "SAP" [ref=s1e137]
- img "Infosys" [ref=s1e138]
- img "Spotify" [ref=s1e139]
- button "Logo suite animation is currently playing. Click to pause." [ref=s1e140]: Pause
- heading "Accelerate performance" [level=2] [ref=s1e151]
- paragraph [ref=s1e153]: With GitHub Copilot embedded throughout the platform,
you can simplify your toolchain, automate tasks, and improve the
developer experience.
- button "Pause video" [ref=s1e162]
- text: "A Copilot chat window with extensions enabled. The user inputs the @
symbol to reveal a list of five Copilot Extensions. @Sentry is selected
from the list, which shifts the window to a chat directly with that
extension. There are three sample prompts at the bottom of the chat
window, allowing the user to Get incident information, Edit status on
incident, or List the latest issues. The last one is activated to send
the prompt: @Sentry List the latest issues. The extension then lists
several new issues and their metadata."
- heading "Work 55% faster. Jump to footnote 1 Increase productivity with AI-powered coding assistance, including code completion, chat, and more." [level=3] [ref=s1e176]:
- text: Work 55% faster.
- link "Jump to footnote 1" [ref=s1e177]:
- /url: "#footnote-1"
- superscript [ref=s1e178]: Jump to footnote 1
- text: Increase productivity with AI-powered coding assistance, including code
completion, chat, and more.
- link "Explore GitHub Copilot" [ref=s1e182]:
- /url: /features/copilot
- paragraph [ref=s1e189]: Duolingo boosts developer speed by 25% with GitHub Copilot
- link "Read customer story" [ref=s1e191]:
- /url: /customer-stories/duolingo
- paragraph [ref=s1e197]: 2024 Gartner® Magic Quadrant™ for AI Code Assistants
- link "Read report" [ref=s1e199]:
- /url: https://www.gartner.com/doc/reprints?id=1-2IKO4MPE&ct=240819&st=sb
- term [ref=s1e213]:
- button "Automate any workflow" [expanded] [ref=s1e214]:
- heading "Automate any workflow" [level=3] [ref=s1e216]
- definition [ref=s1e217]:
- paragraph [ref=s1e220]: Optimize your process with simple and secured CI/CD.
- text: A list of workflows displays a heading ‘45,167 workflow runs’ at the top.
Below are five rows of completed workflows accompanied by their
completion time and their duration formatted in minutes and seconds.
- link "Discover GitHub Actions" [ref=s1e223]:
- /url: /features/actions
- term [ref=s1e227]:
- button "Get up and running in seconds" [ref=s1e228]:
- heading "Get up and running in seconds" [level=3] [ref=s1e230]
- term [ref=s1e232]:
- button "Build on the go" [ref=s1e233]:
- heading "Build on the go" [level=3] [ref=s1e235]
- term [ref=s1e237]:
- button "Integrate the tools you love" [ref=s1e238]:
- heading "Integrate the tools you love" [level=3] [ref=s1e240]
- heading "Built-in application security where found means fixed" [level=2]
[ref=s1e247]
- paragraph [ref=s1e250]: Use AI to find and fix vulnerabilities—freeing your
teams to ship more secure software faster.
- heading "Apply fixes in seconds. Spend less time fixing vulnerabilities
and more time building features with Copilot Autofix." [level=3]
[ref=s1e259]
- link "Explore GitHub Advanced Security" [ref=s1e262]:
- /url: /enterprise/advanced-security
- img "Copilot Autofix identifies vulnerable code and provides an
explanation, together with a secure code suggestion to remediate the
vulnerability." [ref=s1e268]
- paragraph [ref=s1e275]: Solve security debt. Leverage AI-assisted security
campaigns to reduce application vulnerabilities and zero-day attacks.
- link "Discover security campaigns" [ref=s1e278]:
- /url: /enterprise/advanced-security
- img "A security campaign screen displays the campaign’s progress bar with
97% completed of 701 alerts. A total of 23 alerts are left with 13 in
progress, and the campaign started 20 days ago. The status below shows
that there are 7 days left in the campaign with a due date of November 15,
2024." [ref=s1e282]
- paragraph [ref=s1e286]: Dependencies you can depend on. Update vulnerable
dependencies with supported fixes for breaking changes.
- link "Learn about Dependabot" [ref=s1e289]:
- /url: /features/security/software-supply-chain
- img "List of dependencies defined in a requirements .txt file."
[ref=s1e293]
- paragraph [ref=s1e297]: "Your secrets, your business: protected. Detect,
prevent, and remediate leaked secrets across your organization."
- link "Read about secret scanning" [ref=s1e300]:
- /url: /features/security/code
- img "GitHub push protection confirms and displays an active secret, and
blocks the push." [ref=s1e304]
- heading "7x faster vulnerability fixes with GitHub Jump to footnote 2" [level=3] [ref=s1e309]:
- text: 7x faster vulnerability fixes with GitHub
- link "Jump to footnote 2" [ref=s1e312]:
- /url: "#footnote-2"
- superscript [ref=s1e313]: Jump to footnote 2
- heading "90% coverage of alert types in all supported languages with Copilot Autofix" [level=3] [ref=s1e318]:
- text: 90% coverage
- link "of alert types in all supported languages with Copilot Autofix" [ref=s1e321]:
- /url: https://docs.github.com/en/code-security/code-scanning/managing-your-code-scanning-configuration/codeql-query-suites
- heading "Work together, achieve more" [level=2] [ref=s1e329]
- paragraph [ref=s1e331]: Collaborate with your teams, use management tools that
sync with your projects, and code from anywhere—all on a single,
integrated platform.
- img "A project management dashboard showing tasks for the ‘OctoArcade
Invaders’ project, with tasks grouped under project phase categories like
‘Prototype,’ ‘Beta,’ and ‘Launch’ in a table layout. One of the columns
displays sub-issue progress bars with percentages for each issue."
[ref=s1e343]
- heading "Your workflows, your way. Plan effectively with an adaptable
spreadsheet that syncs with your work." [level=3] [ref=s1e349]
- link "Jump into GitHub Projects" [ref=s1e352]:
- /url: /features/issues
- figure [ref=s1e357]:
- blockquote [ref=s1e358]: It helps us onboard new software engineers and get them
productive right away. We have all our source code, issues, and pull
requests in one place... GitHub is a complete platform that frees us
from menial tasks and enables us to do our best work.
- text: Fabian Faulhaber Application manager at Mercedes-Benz
- term [ref=s1e375]:
- button "Keep track of your tasks" [expanded] [ref=s1e376]:
- heading "Keep track of your tasks" [level=3] [ref=s1e378]
- definition [ref=s1e379]:
- paragraph [ref=s1e382]: Create issues and manage projects with tools that adapt to your code.
- text: Display of task tracking within an issue, showing the status of related
sub-issues and their connection to the main issue.
- link "Explore GitHub Issues" [ref=s1e385]:
- /url: /features/issues
- term [ref=s1e389]:
- button "Share ideas and ask questions" [ref=s1e390]:
- heading "Share ideas and ask questions" [level=3] [ref=s1e392]
- term [ref=s1e394]:
- button "Review code changes together" [ref=s1e395]:
- heading "Review code changes together" [level=3] [ref=s1e397]
- term [ref=s1e399]:
- button "Fund open source projects" [ref=s1e400]:
- heading "Fund open source projects" [level=3] [ref=s1e402]
- heading "From startups to enterprises, GitHub scales with teams of any
size in any industry." [level=2] [ref=s1e410]
- tablist [ref=s1e416]:
- tab "By industry" [ref=s1e422]
- tab "By size" [ref=s1e424]
- tab "By use case" [ref=s1e426]
- separator [ref=s1e428]
- link "Figma Technology Figma streamlines development and strengthens security Read customer story" [ref=s1e433]:
- /url: https://github.com/customer-stories/figma
- img "Figma" [ref=s1e440]
- text: Technology
- paragraph [ref=s1e443]: Figma streamlines development and strengthens security
- text: Read customer story
- link "Mercedes-Benz Automotive Mercedes-Benz standardizes source code and automates onboarding Read customer story" [ref=s1e447]:
- /url: https://github.com/customer-stories/mercedes-benz
- img "Mercedes-Benz" [ref=s1e454]
- text: Automotive
- paragraph [ref=s1e457]: Mercedes-Benz standardizes source code and automates onboarding
- text: Read customer story
- link "Mercado Libre Financial services Mercado Libre cuts coding time by 50% Read customer story" [ref=s1e461]:
- /url: https://github.com/customer-stories/mercado-libre
- img "Mercado Libre" [ref=s1e468]
- text: Financial services
- paragraph [ref=s1e471]: Mercado Libre cuts coding time by 50%
- text: Read customer story
- link "Explore customer stories" [ref=s1e478]:
- /url: /customer-stories
- separator [ref=s1e481]
- link "View all solutions" [ref=s1e483]:
- /url: /solutions
- heading "Millions of developers and businesses call GitHub home" [level=2]
[ref=s1e492]
- paragraph [ref=s1e493]: Whether you’re scaling your development process or just
learning how to code, GitHub is where you belong. Join the world’s most
widely adopted AI-powered developer platform to build the technologies
that redefine what’s possible.
- form "Sign up for GitHub" [ref=s1e495]:
- text: Enter your email
- textbox "Enter your email" [ref=s1e501]
- button "Sign up for GitHub" [ref=s1e502]
- link "Try GitHub Copilot" [ref=s1e505]:
- /url: /features/copilot
- heading "Footnotes" [level=2] [ref=s1e510]
- list [ref=s1e511]:
- listitem [ref=s1e512]:
- paragraph [ref=s1e513]:
- 'link "Survey: The AI wave continues to grow on software development teams, 2024." [ref=s1e515]':
- /url: https://github.blog/news-insights/research/survey-ai-wave-grows/
- link "Back to content" [ref=s1e516]:
- /url: "#footnote-ref-1"
- listitem [ref=s1e517]:
- paragraph [ref=s1e518]:
- text: This 7X times factor is based on data from the industry’s longest running
analysis of fix rates Veracode State of Software Security
2023, which cites the average time to fix 50% of flaws as
198 days vs. GitHub’s fix rates of 72% of flaws with in 28
days which is at a minimum of 7X faster when compared.
- link "Back to content" [ref=s1e520]:
- /url: "#footnote-ref-2"
- link "Back to top" [ref=s1e522]:
- /url: "#hero"
- contentinfo [ref=s1e523]:
- heading "Site-wide Links" [level=2] [ref=s1e524]
- link "Go to GitHub homepage" [ref=s1e528]:
- /url: /
- img [ref=s1e529]
- heading "Subscribe to our developer newsletter" [level=3] [ref=s1e533]
- paragraph [ref=s1e534]: Get tips, technical guides, and best practices. Twice a
month. Right in your inbox.
- link "Subscribe" [ref=s1e535]:
- /url: https://resources.github.com/newsletter/
- navigation "Product" [ref=s1e536]:
- heading "Product" [level=3] [ref=s1e537]
- list [ref=s1e538]:
- listitem [ref=s1e539]:
- link "Features" [ref=s1e540]:
- /url: /features
- listitem [ref=s1e541]:
- link "Enterprise" [ref=s1e542]:
- /url: /enterprise
- listitem [ref=s1e543]:
- link "Copilot" [ref=s1e544]:
- /url: /features/copilot
- listitem [ref=s1e545]:
- link "Security" [ref=s1e546]:
- /url: /security
- listitem [ref=s1e547]:
- link "Pricing" [ref=s1e548]:
- /url: /pricing
- listitem [ref=s1e549]:
- link "Team" [ref=s1e550]:
- /url: /team
- listitem [ref=s1e551]:
- link "Resources" [ref=s1e552]:
- /url: https://resources.github.com
- listitem [ref=s1e553]:
- link "Roadmap" [ref=s1e554]:
- /url: https://github.com/github/roadmap
- listitem [ref=s1e555]:
- link "Compare GitHub" [ref=s1e556]:
- /url: https://resources.github.com/devops/tools/compare
- navigation "Platform" [ref=s1e557]:
- heading "Platform" [level=3] [ref=s1e558]
- list [ref=s1e559]:
- listitem [ref=s1e560]:
- link "Developer API" [ref=s1e561]:
- /url: https://docs.github.com/get-started/exploring-integrations/about-building-integrations
- listitem [ref=s1e562]:
- link "Partners" [ref=s1e563]:
- /url: https://partner.github.com
- listitem [ref=s1e564]:
- link "Education" [ref=s1e565]:
- /url: https://github.com/edu
- listitem [ref=s1e566]:
- link "GitHub CLI" [ref=s1e567]:
- /url: https://cli.github.com
- listitem [ref=s1e568]:
- link "GitHub Desktop" [ref=s1e569]:
- /url: https://desktop.github.com
- listitem [ref=s1e570]:
- link "GitHub Mobile" [ref=s1e571]:
- /url: https://github.com/mobile
- navigation "Support" [ref=s1e572]:
- heading "Support" [level=3] [ref=s1e573]
- list [ref=s1e574]:
- listitem [ref=s1e575]:
- link "Docs" [ref=s1e576]:
- /url: https://docs.github.com
- listitem [ref=s1e577]:
- link "Community Forum" [ref=s1e578]:
- /url: https://github.community
- listitem [ref=s1e579]:
- link "Professional Services" [ref=s1e580]:
- /url: https://services.github.com
- listitem [ref=s1e581]:
- link "Premium Support" [ref=s1e582]:
- /url: /enterprise/premium-support
- listitem [ref=s1e583]:
- link "Skills" [ref=s1e584]:
- /url: https://skills.github.com
- listitem [ref=s1e585]:
- link "Status" [ref=s1e586]:
- /url: https://www.githubstatus.com
- listitem [ref=s1e587]:
- link "Contact GitHub" [ref=s1e588]:
- /url: https://support.github.com?tags=dotcom-footer
- navigation "Company" [ref=s1e589]:
- heading "Company" [level=3] [ref=s1e590]
- list [ref=s1e591]:
- listitem [ref=s1e592]:
- link "About" [ref=s1e593]:
- /url: https://github.com/about
- listitem [ref=s1e594]:
- link "Customer stories" [ref=s1e595]:
- /url: /customer-stories?type=enterprise
- listitem [ref=s1e596]:
- link "Blog" [ref=s1e597]:
- /url: https://github.blog
- listitem [ref=s1e598]:
- link "The ReadME Project" [ref=s1e599]:
- /url: /readme
- listitem [ref=s1e600]:
- link "Careers" [ref=s1e601]:
- /url: https://github.careers
- listitem [ref=s1e602]:
- link "Newsroom" [ref=s1e603]:
- /url: /newsroom
- listitem [ref=s1e604]:
- link "Inclusion" [ref=s1e605]:
- /url: /about/diversity
- listitem [ref=s1e606]:
- link "Social Impact" [ref=s1e607]:
- /url: https://socialimpact.github.com
- listitem [ref=s1e608]:
- link "Shop" [ref=s1e609]:
- /url: https://shop.github.com
- navigation "Legal and Resource Links" [ref=s1e612]:
- list [ref=s1e613]:
- listitem [ref=s1e614]:
- text: ©
- time [ref=s1e615]: "2025"
- text: GitHub, Inc.
- listitem [ref=s1e616]:
- link "Terms" [ref=s1e617]:
- /url: https://docs.github.com/site-policy/github-terms/github-terms-of-service
- listitem [ref=s1e618]:
- link "Privacy" [ref=s1e619]:
- /url: https://docs.github.com/site-policy/privacy-policies/github-privacy-statement
- text: (
- link "Updated 02/2024" [ref=s1e620]:
- /url: https://github.com/github/site-policy/pull/582
- text: Updated
- time [ref=s1e621]: 02/2024
- text: )
- listitem [ref=s1e622]:
- link "Sitemap" [ref=s1e623]:
- /url: /sitemap
- listitem [ref=s1e624]:
- link "What is Git?" [ref=s1e625]:
- /url: /git-guides
- listitem [ref=s1e626]:
- button "Manage cookies" [ref=s1e628]
- listitem [ref=s1e629]:
- button "Do not share my personal information" [ref=s1e631]
- navigation "GitHub's Social Media Links" [ref=s1e632]:
- list [ref=s1e633]:
- listitem [ref=s1e634]:
- link "GitHub on LinkedIn" [ref=s1e635]:
- /url: https://www.linkedin.com/company/github
- listitem [ref=s1e637]:
- link "GitHub on Instagram" [ref=s1e638]:
- /url: https://www.instagram.com/github
- listitem [ref=s1e640]:
- link "GitHub on YouTube" [ref=s1e641]:
- /url: https://www.youtube.com/github
- listitem [ref=s1e643]:
- link "GitHub on X" [ref=s1e644]:
- /url: https://x.com/github
- listitem [ref=s1e646]:
- link "GitHub on TikTok" [ref=s1e647]:
- /url: https://www.tiktok.com/@github
- listitem [ref=s1e649]:
- link "GitHub on Twitch" [ref=s1e650]:
- /url: https://www.twitch.tv/github
- listitem [ref=s1e652]:
- link "GitHub’s organization on GitHub" [ref=s1e653]:
- /url: https://github.com/github
現状、LLM にウェブブラウジングさせる方法に唯一となる解はないと思います（実際、ウェブページの実装に依存するところが大きい）。
Browser Use のように、DOMを解析しその意味付け（インタラクティブな要素かどうかなど）を行う力技を実装する以外にも、アクセシビリティツリーに着目する方法など、今後もこの LLM とブラウザには注目しています。
バクラク事業部 Platform Engineering 部では定期的な技術発信を行っています！
SRE、開発チームエネブルメント、認証やAPI提供に興味のある方は、ぜひカジュアル面談もお待ちしています。
Be the first to comment
