CINXE.COM

<!DOCTYPE html> <html lang="ja" data-page-scope="EntrySearch" data-stable-request-url="https://b.hatena.ne.jp/q/playwright" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-entry-search-query="playwright" data-page-subtype="entrysearch" data-page-type="entrysearch" > <head>  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5TDHQX'); </script>  <meta charset="UTF-8"> <title>playwrightの人気記事 161件 - はてなブックマーク</title> <script src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/pikaday.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/triangle.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/q/playwright" /> <link rel="next" href="/q/playwright?date_range=5y&users=3&sort=popular&page=2&safe=on&target=tag"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/safari-pinned-tab-icon.svg" color="#00A4DE" /> <meta name="msapplication-navbutton-color" content="#2C6EBD" /> <meta name="msapplication-task" content="name=はてなブックマーク; action-uri=/; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/hotentry.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="origin"> <link rel="alternate" type="application/rss+xml" href="/q/playwright?sort=popular&users=3&date_range=5y&mode=rss&target=tag&safe=on" /> <script> function isMobile() { const html = document.documentElement; const deviceType = html.dataset.deviceType || ''; if (deviceType.length > 0) { return deviceType === 'MOBILE'; } else { const maxMobileWidth = 480; const windowWidth = window.innerWidth; return maxMobileWidth >= windowWidth; } } </script> </head> <body class="page-centerarticle page-entrysearch fixed-header">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5TDHQX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="link-app-banner js-dynamic-link-app-banner is-hidden"> <button class="link-app-banner-btn-close js-dynamic-link-app-banner-close-button"><span>close</span></button> <a class="link-app-banner-btn" href="https://hatenabookmark.page.link/app"> <div class="link-app-banner-btn-detail"> <div class="link-app-banner-icon"><img src="/images/v4/public/app/ic-ios.svg" alt="はてなブックマークアプリ"></div> <p class="link-app-banner-text">サクサク読めて、<br class="link-app-banner-text-newline">アプリ限定の機能も多数！</p> </div> <div class="link-app-banner-btn-open">アプリで開く</div> </a> </div> <header id="global-header" data-portal-static-origin="//cdn.www.st-hatena.com"> <div id="header" class="global-header-inner js-global-header-inner"> <h2 id="gh-logo"><a href="/" data-gtm-label="gh-blogo"><span>はてなブックマーク</span></a></h2> <div class="is-guest js-guest is-hidden"> <input id="gh-search-icon-check" type="checkbox" checked="checked" /> <label class="gh-search-icon" for="gh-search-icon-check" aria-label="検索を閉じる"><span>閉じる</span></label> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a href="/guide" data-gtm-label="gh-guest-guide">はてなブックマークって？</a></li> <li><a href="/guide/tools" data-gtm-label="gh-guest-tools">アプリ・拡張の紹介</a></li> <li><a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2F%3Fregistered_from%3Dglobal-header&via=201037" class="gh-guest-register" data-gtm-label="gh-guest-register">ユーザー登録</a></li> <li><a href="https://www.hatena.ne.jp/login?location=https%3A%2F%2Fb.hatena.ne.jp%2Fq%2Fplaywright" rel="nofollow" class="gh-guest-login" data-gtm-label="gh-guest-login">ログイン</a></li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </div> <noscript> <ul class="gh-service-menu"> <li><a href="https://www.hatena.ne.jp/logout?location=https%3A%2F%2Fb.hatena.ne.jp%2F">ログアウト</a></li> </ul> </noscript> <script type="text/x-template" id="template-menu-hatena-user"> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}"><img src="{{user_image_url}}" class="header-profile-icon" width="16" height="16" alt="{{username}}" /></a><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}">マイページ</a></li> <li><a class="bookmark" data-gtm-label="gh-bookmark" href="{{bookmark_url}}">ブックマーク</a></li> <li><a class="unread_bookmark" data-gtm-label="gh-ril" href="{{bookmark_stock_url}}">あとで読む</a></li> <li><a class="add" data-gtm-label="gh-add" href="{{add_bookmark_url}}">追加</a></li> <li><a class="tools" data-gtm-label="gh-tools" href="/guide/tools">ツール</a></li> <li><a class="config" data-gtm-label="gh-config" href="/-/my/config/profile">設定</a></li> <li><a class="feedback" data-gtm-label="gh-feedback" href="/-/feedback/hatena_bookmark" target="_blank">フィードバック</a></li> <li id="header-username" class="gh-dropdown-services" data-gtm-label="gh-services" title="利用中のサービス" data-name="{{username}}"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/usermenu-wh.svg" alt="利用中のサービス" width="24" height="24" /> </span> <dl class="header-window" id="username-window"></dl> </li> <li id="header-notify" data-gtm-label="gh-notify" class="gh-dropdown-notify" title="あなたへのお知らせ"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/notify-wh.svg" alt="あなたへのお知らせ" width="25" height="25" /> <span class="notify-count"></span> </span> <div id="notify-window" class="header-window header-notify"></div> </li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </script> </div> </header> <div id="info-header"><div id="info-header-message"></div><span></span></div> <div class="global-notification is-hidden js-global-notification"></div> <div id="container"> <div class="entrysearch-searchbox"> <form class="entrysearch-searchbox-body js-entrysearch-form" method="get"> <input value="playwright" type="text" class="entrysearch-searchbox-textInput js-entrysearch-form-text-input" size="40" aria-label="検索キーワードを入力"> <input value="tag" name="target" type="hidden"> <input value="popular" name="sort" type="hidden"> <input value="3" name="users" type="hidden"> <input value="on" name="safe" type="hidden"> <input value="検索" type="submit" class="entrysearch-searchbox-btn js-entrysearch-form-button" aria-label="検索"> </form> </div> <div class="centerarticle-wrapper"> <div class="left-container"> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">検索対象</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/playwright?safe=on&target=all&date_range=5y&users=3&sort=popular" >すべて</a></li> <li><a href="/q/playwright?target=tag&safe=on&sort=popular&users=3&date_range=5y" class="is-current">タグ</a></li> <li><a href="/q/playwright?safe=on&target=title&date_range=5y&sort=popular&users=3" >タイトル</a></li> <li><a href="/q/playwright?safe=on&target=text&date_range=5y&sort=popular&users=3" >本文</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">並び順</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/playwright?target=tag&safe=on&users=3&sort=recent&date_range=5y" >新着</a></li> <li><a href="/q/playwright?users=3&sort=popular&date_range=5y&target=tag&safe=on" class="is-current">人気</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">ブックマーク数</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/playwright?safe=on&target=tag&date_range=5y&users=1&sort=popular" >1 user</a></li> <li><a href="/q/playwright?date_range=5y&users=3&sort=popular&safe=on&target=tag" class="is-current">3 users</a></li> <li><a href="/q/playwright?sort=popular&users=50&date_range=5y&target=tag&safe=on" >50 users</a></li> <li><a href="/q/playwright?target=tag&safe=on&sort=popular&users=100&date_range=5y" >100 users</a></li> <li><a href="/q/playwright?target=tag&safe=on&sort=popular&users=500&date_range=5y" >500 users</a></li> </ul> </div> <div class="centerarticle-sidebar-menu js-safe-search-div is-hidden" title="セーフサーチはログイン時にのみoffにできます"> <h3 class="centerarticle-aside-title">セーフサーチ</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/playwright?safe=on&target=tag&date_range=5y&users=3&sort=popular" class="is-current">オン</a></li> <li><a href="/q/playwright?target=tag&safe=off&users=3&sort=popular&date_range=5y" >オフ</a></li> </ul> </div> <div class="centerarticle-sidebar-menu js-entrysearch-date"> <h3 class="centerarticle-aside-title">期間指定</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/playwright?target=tag&safe=on&sort=popular&users=3&date_range=all" >すべて</a></li> <li><a href="/q/playwright?safe=on&target=tag&date_range=w&users=3&sort=popular" >1週間</a></li> <li><a href="/q/playwright?target=tag&safe=on&sort=popular&users=3&date_range=m" >1ヶ月</a></li> <li><a href="/q/playwright?sort=popular&users=3&date_range=y&target=tag&safe=on" >1年</a></li> </ul> <form method="get" class="js-entrysearch-datepicker-form"> <input value="playwright" class="js-entrysearch-form-text-input" type="hidden"> <input value="tag" name="target" type="hidden"> <input value="popular" name="sort" type="hidden"> <input value="3" name="users" type="hidden"> <input value="on" name="safe" type="hidden"> <ul class="centerarticle-sub-navi"> <li><input class="js-entrysearch-datepicker-start entrysearch-searchbox-dateInput" value="" type="text" name="date_begin"> から</li> <li><input class="js-entrysearch-datepicker-end entrysearch-searchbox-dateInput" value="" type="text" name="date_end"> まで</li> <li><input value="検索" type="submit" class="entrysearch-searchbox-btn js-entrysearch-form-button"><li> </ul> </form> </div> </div> <div class="entrysearch-bar"> <p class="entrysearch-bar-results">1 - 40 件 / 161件</p> <div class="entrysearch-bar-inner"> <button class="entrysearch-filter-btn js-entrysearch-filter-btn">絞り込み</button> <a class="entrysearch-sort-btn" href="/q/playwright?date_range=5y&sort=popular&users=3&safe=on&target=tag">新着順</a> <a class="entrysearch-sort-btn is-current" href="/q/playwright?safe=on&target=tag&date_range=5y&users=3&sort=recent">人気順</a> </div> </div> <div class="entrysearch-filter js-entrysearch-filter is-hidden"> <div class="entrysearch-filter-header"> <h2 class="entrysearch-filter-title">絞り込み</h2> <button class="entrysearch-filter-close js-entrysearch-filter-close"></button> </div> <ul class="entrysearch-filter-list"> <li class="entrysearch-filter-item js-entrysearch-target-dropdown"> <h3 class="entrysearch-filter-item-head">検索対象</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-target"> <option value="all" >すべて</option> <option value="tag" selected>タグ</option> <option value="title" >タイトル</option> <option value="text" >本文</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">ブックマーク数</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-users"> <option value="1" >1 user</option> <option value="3" selected>3 users</option> <option value="50" >50 users</option> <option value="100" >100 users</option> <option value="500" >500 users</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">期間</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-daterange"> <option value="all">すべて</option> <option value="w" >1週間</option> <option value="m" >1ヶ月</option> <option value="y" >1年</option> </select> </div> </li> <li class="entrysearch-filter-item js-safe-search-div is-hidden"> <h3 class="entrysearch-filter-item-head">セーフサーチ</h3> <div class="entrysearch-filter-checkbox"> <input type="checkbox" name="safesearch" id="safesearch" class="js-entryseach-safesearch" checked> <label class="entrysearch-filter-checkbox-label" for="safesearch"></label> </div> </li> </ul> <div class="entrysearch-filter-footer"> <button class="entrysearch-filter-search-btn styleguide-btn-primary js-entrysearch-filter-search-btn">検索する</button> <button class="entrysearch-filter-clear-btn styleguide-btn-text js-entrysearch-filter-clear-btn">条件をクリアする</button> </div> </div> <div class="search-container"> <h2 class="entrysearch-title"> <span class="entrysearch-word">playwrightの検索結果</span><span class="entrysearch-result">1 - 40 件 / 161件</span> </h2> <div class="entrysearch-summary-text"> <span>playwright</span>に関するエントリは<span>161</span>件あります。 <span>テスト</span>、 <span>test</span>、 <span>開発</span> などが関連タグです。人気エントリには <span>『【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】』</span>などがあります。 </div> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-header"> <h3 class="entrysearch-related-title">playwrightの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/t-kurasawa/items/fc47a9133dd6cfe1ae7b" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/noimage.png" alt="Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/t-kurasawa/items/fc47a9133dd6cfe1ae7b" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） - Qiita </a> </h4> <a href="/entry/s/qiita.com/t-kurasawa/items/fc47a9133dd6cfe1ae7b" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 73 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/ore88ore/items/106c851e56631045fe25" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/noimage.png" alt="Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/ore88ore/items/106c851e56631045fe25" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita </a> </h4> <a href="/entry/s/qiita.com/ore88ore/items/106c851e56631045fe25" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 24 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/magurotuna/articles/playwright-mcp-setup-in-wsl" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e6312daca307885dd7c19abd18a3209f30d36f81/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--R7L8IkkQ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252581%2525AA%2525E3%252582%25258B%2525E3%252581%2525B9%2525E3%252581%25258FWSL%2525E5%252581%2525B4%2525E3%252581%2525AB%2525E5%2525AF%252584%2525E3%252581%25259B%2525E3%252581%2525A4%2525E3%252581%2525A4playwright-mcp%2525E3%252582%252592Claude%252520Desktop%2525E3%252581%2525A7%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252582%25258B%2525E3%252582%252588%2525E3%252581%252586%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amagurotuna%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dNUGF0cWN1MUh1d1dEcG5uVzRETFVxZlI5aDlOM1NFc3FmaWdYZkE9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="なるべくWSL側に寄せつつplaywright-mcpをClaude Desktopで使えるようにする"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/magurotuna/articles/playwright-mcp-setup-in-wsl" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> なるべくWSL側に寄せつつplaywright-mcpをClaude Desktopで使えるようにする </a> </h4> <a href="/entry/s/zenn.dev/magurotuna/articles/playwright-mcp-setup-in-wsl" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 58 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/72f4ff2a8add2fddb42bc450479e9f6f33d7e427/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2MzU5NSUyRmZmNmNlMTgwMDg2N2Y4YTU3Y2RmNTk5ZmI0YzA5ZGIwZjUxNWZjNmMlMkZsYXJnZS5wbmclM0YxNjA4NTY2OTYwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTk3YjE4NjEyYWE1YjJjNTVlNGNmMGJmMWMwYWRjMGVh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Ddb4bb24093222e7b64086a741a2f1efe%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UGxheXdyaWdodCUyME1DUCVFNiU4QSU4MCVFOCVBMSU5MyVFOCVBNyVBMyVFOCVBQSVBQyUyMCUyMCVFMyU4MCU5QyVFNiVBQyVBMSVFNCVCOCU5NiVFNCVCQiVBMyVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFOCU4NyVBQSVFNSU4QiU5NSVFNSU4QyU5NiVFMyU4MSVBRSVFNSU4RiVBRiVFOCU4MyVCRCVFNiU4MCVBNyVFMyU4MCU5QyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWE0MzM2OWFjZTk4OThmYTZiZGI0MGFlNDBhZjVkODlk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjcl9tdXJhaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTg1Mjc3MWYyZjIzMDI4NTg1NTMxZGVmZGVkOTA3ZjE3%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D973dabcac953038039dc17e64eb58d9f" alt="Playwright MCP技術解説〜次世代ブラウザ自動化の可能性〜 - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Playwright MCP技術解説〜次世代ブラウザ自動化の可能性〜 - Qiita </a> </h4> <a href="/entry/s/qiita.com/cr_murai/items/13e55eab7e21f6f29619" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 64 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f3f89c5b1e7cbbf8ad9cc71e12ef3740c32e38ba/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzOTY4NTg4JTJGNzczYzFkYzBlMjZmOWRiNDlhNzNlMDI2ZTFkZDcxOTMxNmZlMzJiYSUyRmxhcmdlLnBuZyUzRjE3MzQ5MzI4MTA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9OWJkMjJkNjJhZDQxZGJlMWI0MDliZjdhMWUyZjljMTg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Decc6aa17373bb8b42d565dc03b6dcc21%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJTkwQ2xhdWRlJUUzJTgwJTkxUGxheXdyaWdodC1NQ1AlRTMlODElQTclRTUlQTQlODklRTMlODIlOEYlRTMlODIlOEIlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTglODclQUElRTUlOEIlOTUlRTUlOEMlOTYlRTMlODElQUUlRTQlQjglOTYlRTclOTUlOEMlRUYlQkMlODElRTUlODglOUQlRTUlQkYlODMlRTglODAlODUlRTMlODElQTclRTMlODIlODIlRTQlQkQlQkYlRTMlODElODglRTMlODIlOEJFMkUlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTUlODUlQTUlRTklOTYlODAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz03NDgxNzQwOTlmY2U1OWE3ZTU4NjljOTZjNmI5ODBmYg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBOYWthbXVyYS1LYWl0byZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTY2NmJmMzc3ZjE2OTM3YmI2Y2IwZjViNTJkMWM1YzMy%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2d3988061c4bc8945ace3434a431c33a" alt="【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> 【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita </a> </h4> <a href="/entry/s/qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 127 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0b1532dff633e0fdbdd8d57fbacfdcc9e57e025a/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fC4FVjh0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3APlaywright%252520MCP%2525E3%252581%2525A8Cursor%2525E3%252581%2525A7%2525E3%252580%252581E2E%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252582%252592%2525E8%252587%2525AA%2525E5%25258B%252595%2525E7%252594%25259F%2525E6%252588%252590%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252520%2525E3%252580%25259CAI%2525C3%252597%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%2525E3%252581%2525AE%2525E6%252596%2525B0%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%252581%2525E3%252580%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AKenshin%252520Tatsumi%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzcxNTMxNmU4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AdotD%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JjYzUwOWYxNWIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Playwright MCPとCursorで、E2Eテストを自動生成してみた〜AI×ブラウザ操作の新アプローチ〜"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Playwright MCPとCursorで、E2Eテストを自動生成してみた〜AI×ブラウザ操作の新アプローチ〜 </a> </h4> <a href="/entry/s/zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 297 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/kimkiyong/articles/679faf454b0ee0" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/eee41374055dc1d596af13f79992d9aa7d89c691/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wTKPpHcP--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AMicrosoft%252520Playwright%252520MCP%2525E3%252581%25258C%2525E5%252588%252587%2525E3%252582%25258A%2525E6%25258B%252593%2525E3%252581%25258FLLM%2525E3%252581%2525A8%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E3%252581%2525AE%2525E6%252596%2525B0%2525E3%252581%25259F%2525E3%252581%2525AA%2525E7%2525B5%2525B1%2525E5%252590%252588%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%25258D%2525E3%252582%252587%2525E3%252582%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzZlNGVhN2QzODAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/kimkiyong/articles/679faf454b0ee0" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合 </a> </h4> <a href="/entry/s/zenn.dev/kimkiyong/articles/679faf454b0ee0" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 122 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://note.com/kyutaro15/n/n39c858e8f65c" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d54aa5b5225ad283b270611a0ccb5936d36716c6/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F180573294%2Frectangle_large_type_2_68f0206e27895a71d36cee28a9b6ee8f.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://note.com/kyutaro15/n/n39c858e8f65c" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> 🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro </a> </h4> <a href="/entry/s/note.com/kyutaro15/n/n39c858e8f65c" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 85 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://github.com/microsoft/playwright-mcp" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3532827a05a572651a41e3a032acc101a11039fb/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F53e4ee213af755cddca06eea55317c92c822abfac5f491ff24bd249973339693%2Fmicrosoft%2Fplaywright-mcp" alt="GitHub - microsoft/playwright-mcp: Playwright MCP server"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://github.com/microsoft/playwright-mcp" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> GitHub - microsoft/playwright-mcp: Playwright MCP server </a> </h4> <a href="/entry/s/github.com/microsoft/playwright-mcp" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 93 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ffed770b416a41e50f1e4d7c53375c21e71bbf5/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F090cada349e14883b171d0e105e6a3db%2Fslide_0.jpg%3F33833469" alt="個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> 個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡 </a> </h4> <a href="/entry/s/speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 117 users </a> </div> </li> </ul> </div> <ul class="entrysearch-articles"> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/fp16/articles/42b8047dad3bdc"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/fp16/articles/42b8047dad3bdc" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ffp16%2Farticles%2F42b8047dad3bdc" alt="">【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/fp16/articles/42b8047dad3bdc" class="js-keyboard-entry-page-openable" title="【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】 (542 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 542 users </a> </span> </li> <li> <a href="/site/zenn.dev/fp16" title="『zenn.dev/fp16』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/fp16 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/07/31</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、株式会社FP16で結構コードを書いている二宮です。最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得するこれが令和のWebスクレイピングのベストプラクティスだと思っています。これらの方法を、目標に合わせて使い分けています。使い分け方 CheerioでHTML解析 JavaS</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">スクレイピング</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/API" data-gtm-click-label="entry-search-result-item-tag">API</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">プログラミング</a></li> <li><a href="/q/scraping" data-gtm-click-label="entry-search-result-item-tag">scraping</a></li> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/fp16/articles/42b8047dad3bdc"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/fp16/articles/42b8047dad3bdc" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ce816f60f426460bfbc01e74b58cf1e17c5caf86/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ZNXJLohM--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590%2525E4%2525BB%2525A4%2525E5%252592%25258C%2525E6%25259C%252580%2525E6%252596%2525B0%2525E7%252589%252588%2525E3%252580%252591%2525E4%2525BB%2525A4%2525E5%252592%25258C%2525E3%252581%2525AEWeb%2525E3%252582%2525B9%2525E3%252582%2525AF%2525E3%252583%2525AC%2525E3%252582%2525A4%2525E3%252583%252594%2525E3%252583%2525B3%2525E3%252582%2525B0%252528%2525E3%252582%2525AF%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%2525AB%252529%2525E3%252580%252590%2525E3%252583%252599%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%252597%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252582%2525B9%2525E3%252580%252591%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3A%2525E4%2525BA%25258C%2525E5%2525AE%2525AE%252520%2525E8%2525B2%2525AB%252528Kan%252520Ninomiya%252529%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FjYzhiYWJkNGQuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BEFP16%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Y4MWI4MDNlOTEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/ikumatadokoro/zi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/ikumatadokoro/zi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fikumatadokoro%2Fzi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian" alt="">自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/ikumatadokoro/zi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian" class="js-keyboard-entry-page-openable" title="自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践 (409 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 409 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/ikumatadokoro" title="『speakerdeck.com/ikumatadokoro』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/ikumatadokoro </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/10/22</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Kaigi on Rails 2022の登壇資料です！ https://kaigionrails.org/2022/talks/ikumatdkr/</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/selenium" data-gtm-click-label="entry-search-result-item-tag">selenium</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/browser" data-gtm-click-label="entry-search-result-item-tag">browser</a></li> <li><a href="/q/chrome" data-gtm-click-label="entry-search-result-item-tag">chrome</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/Python" data-gtm-click-label="entry-search-result-item-tag">Python</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">プログラミング</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/ikumatadokoro/zi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/ikumatadokoro/zi-fen-dakenoxiao-sanaselenium-olenium-wozuo-tuteshi-meru-burauzazi-dong-hua-ji-shu-noli-lun-toshi-jian" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/06b59cf4f712f15a3ff717284ba4ab84caff0fab/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F4b29b774ae074d199f7035b6e72d0e63%2Fslide_0.jpg%3F23126902" alt="自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/mainy/items/3a9de19f440991f67f34"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/mainy/items/3a9de19f440991f67f34" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fmainy%2Fitems%2F3a9de19f440991f67f34" alt="">Python と Playwright でブラウザを自動操作させるコードを自動生成したよ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/mainy/items/3a9de19f440991f67f34" class="js-keyboard-entry-page-openable" title="Python と Playwright でブラウザを自動操作させるコードを自動生成したよ - Qiita (396 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 396 users </a> </span> </li> <li> <a href="/site/qiita.com/mainy" title="『qiita.com/mainy』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/mainy </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/02/14</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Playwright が昨年１年間で大幅パワーアップしていたので、使い方を確認したときの記録のまとめです。ブラウザを自動操作できるということは、簡単なスクレイピングやブラウザ側のテスト自動化が簡単にできるようになります。特に、Python での解説がまだまだ少なかったので、自分の学習を含めてまとめました。今回は入門編ということで全体像をつかみつつ使用方法の流れを確認していただければありがたいです。 Selenium や Puppeteer を使っている方も、一度試す価値ありと思っています。選定した理由ブラウザのテストを Python で自動化したかったんです。私なりの要件がありまして、非常にわがままな要件でしたが余裕ですべてクリアしました。 Python で書けること。社内で Python を使える方が多いので。pytest と連携してくれるとなおうれしい。 Docker コン</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/python" data-gtm-click-label="entry-search-result-item-tag">python</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">スクレイピング</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/%E8%87%AA%E5%8B%95%E5%8C%96" data-gtm-click-label="entry-search-result-item-tag">自動化</a></li> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/windows" data-gtm-click-label="entry-search-result-item-tag">windows</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/mainy/items/3a9de19f440991f67f34"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/mainy/items/3a9de19f440991f67f34" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9f633c62769128b410f21121abe076f9a8d425c9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjUyMjE3JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTI0MjcyMDIwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWE5ZDNkMDExYzA0YjQ0ZDg3MjEwNzEzMGRiMmE4YjJk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253De985c5c75f3d65d6abbaf3856166d4b6%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UHl0aG9uJTIwJUUzJTgxJUE4JTIwUGxheXdyaWdodCUyMCVFMyU4MSVBNyVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFMyU4MiU5MiVFOCU4NyVBQSVFNSU4QiU5NSVFNiU5MyU4RCVFNCVCRCU5QyVFMyU4MSU5NSVFMyU4MSU5QiVFMyU4MiU4QiVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MiU5MiVFOCU4NyVBQSVFNSU4QiU5NSVFNyU5NCU5RiVFNiU4OCU5MCVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MiU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWQwZWRjZWQwYTA4ZTNjYzUyZTk0ODI2ZTBmMGZmN2Iw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBtYWlueSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWYzYWIwZTliNDExNTVjMWZmNTllOGE1NzM5NGE0MDVj%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db7981f6998861e1c6857d73b2e151fe5" alt="Python と Playwright でブラウザを自動操作させるコードを自動生成したよ - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/acn_jp_sdet/articles/c46299562e4ebb"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/acn_jp_sdet/articles/c46299562e4ebb" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Facn_jp_sdet%2Farticles%2Fc46299562e4ebb" alt="">ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP) </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/acn_jp_sdet/articles/c46299562e4ebb" class="js-keyboard-entry-page-openable" title="ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP) (308 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 308 users </a> </span> </li> <li> <a href="/site/zenn.dev/acn_jp_sdet" title="『zenn.dev/acn_jp_sdet』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/acn_jp_sdet </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/11/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/chrome" data-gtm-click-label="entry-search-result-item-tag">chrome</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/API" data-gtm-click-label="entry-search-result-item-tag">API</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/selenium" data-gtm-click-label="entry-search-result-item-tag">selenium</a></li> <li><a href="/q/browser" data-gtm-click-label="entry-search-result-item-tag">browser</a></li> <li><a href="/q/WebDriver" data-gtm-click-label="entry-search-result-item-tag">WebDriver</a></li> <li><a href="/q/%E5%85%A5%E9%96%80" data-gtm-click-label="entry-search-result-item-tag">入門</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/acn_jp_sdet/articles/c46299562e4ebb"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/acn_jp_sdet/articles/c46299562e4ebb" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dcaad354c7b0b67d320244db09467cc2ac60d127/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--diUecxQD--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E8%252587%2525AA%2525E5%25258B%252595%2525E6%252593%25258D%2525E4%2525BD%25259CAPI%2525E5%252585%2525A5%2525E9%252596%252580%25253A%252520WebDriver%252520API%2525E3%252581%2525A8Chrome%252520DevTools%252520Protocol%252528CDP%252529%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AInoue.T%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk0NzI4MDc4ZDAuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AAccenture%252520Japan%252520SDET%252520...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUFjSFR0ZTB0LW5KX2k1SU9aSHZOMHdXNkJHRURDWllEOFp5RG84NTI3SzVDcGgyPXM5Ni1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <div class="related-entry-wrapper"> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-middle"> <h3 class="entrysearch-related-title">playwrightの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://akiba-pc.watch.impress.co.jp/docs/topic/special/2005307.html" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2e8af0442467caca0eb2b215af416a40bde87289/height=288;version=1;width=512/https%3A%2F%2Fakiba-pc.watch.impress.co.jp%2Fimg%2Fah%2Flist%2F2005%2F307%2F001.jpg" alt="超高速SSDでもエクスプローラーでは速度が全然出ない？！50GB/s超の“実用速度”を実現するために何が必要だったのか「FastCopy」開発者に聞いてみた[Sponsored]"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://akiba-pc.watch.impress.co.jp/docs/topic/special/2005307.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 超高速SSDでもエクスプローラーでは速度が全然出ない？！50GB/s超の“実用速度”を実現するために何が必要だったのか「FastCopy」開発者に聞いてみた[Sponsored] </a> </h4> <a href="/entry/s/akiba-pc.watch.impress.co.jp/docs/topic/special/2005307.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 301 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/Ruuchami/items/7ced2db49fb5c01d9611" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/22b365d72c7fa83d26953c4d93417f89b9fb0cb6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzNjMyMzE5JTJGMzBlMGFkMGE3Y2M5ZDQ5ZDc2YmM2NzNjYTY1ZThkYzJjODYwYmM5MyUyRmxhcmdlLnBuZyUzRjE3MDIwNDc5NTM_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjUxZmE2NDY5N2NmMDJkNzA1ZjVkNTg1NTlhNjZkYjQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D53ea5cb976857c33480e9e139a76a591%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9TUNQJUUzJTgxJUE3JUU5JUEzJUIyJUUzJTgxJUJGJUU0JUJDJTlBJUU3JTk1JUFBJUU5JTk1JUI3JUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJThGJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YjdlYzAxY2FkMTRjMzljZjA5N2I3ZTg4MjJmYTE5NDk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBSdXVjaGFtaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTU1NDkxMmRhYzhmYjdhMjgxYzUxMmNjYmViZTE4Nzk4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D94258021f0dc932d44528e28adaf2f99" alt="MCPで飲み会番長をつくる - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/Ruuchami/items/7ced2db49fb5c01d9611" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> MCPで飲み会番長をつくる - Qiita </a> </h4> <a href="/entry/s/qiita.com/Ruuchami/items/7ced2db49fb5c01d9611" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 295 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://scrapbox.io/kawasima/%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E8%A7%A3%E4%BD%93%E6%96%B0%E6%9B%B8" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fcfebaa08f4d0ab8a1bd48b9243288e9f07ca9b6/height=288;version=1;width=512/https%3A%2F%2Fgyazo.com%2F3c025ee46794196475e32a7446157c5a%2Fmax_size%2F1000" alt="バリデーション解体新書 - kawasima"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://scrapbox.io/kawasima/%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E8%A7%A3%E4%BD%93%E6%96%B0%E6%9B%B8" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> バリデーション解体新書 - kawasima </a> </h4> <a href="/entry/s/scrapbox.io/kawasima/%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E8%A7%A3%E4%BD%93%E6%96%B0%E6%9B%B8" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 307 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.technologyreview.jp/s/358515/anthropic-can-now-track-the-bizarre-inner-workings-of-a-large-language-model/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b27ef11afa66a69e40a1d6695ce52f0e75236a40/height=288;version=1;width=512/https%3A%2F%2Fwww.technologyreview.jp%2Fwp-content%2Fuploads%2Fsites%2F2%2F2025%2F03%2Fanthropic-rabbit-hole-1400x787.jpg" alt="大規模言語モデルは内部で何をやっているのか？覗いて分かった奇妙な回路"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.technologyreview.jp/s/358515/anthropic-can-now-track-the-bizarre-inner-workings-of-a-large-language-model/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 大規模言語モデルは内部で何をやっているのか？覗いて分かった奇妙な回路 </a> </h4> <a href="/entry/s/www.technologyreview.jp/s/358515/anthropic-can-now-track-the-bizarre-inner-workings-of-a-large-language-model/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 120 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/Yametaro/items/255eea3124e769ce845c" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/noimage.png" alt="ワイ「AIちゃん！ワイのタスク全部やっといて！」#MCP - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/Yametaro/items/255eea3124e769ce845c" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> ワイ「AIちゃん！ワイのタスク全部やっといて！」#MCP - Qiita </a> </h4> <a href="/entry/s/qiita.com/Yametaro/items/255eea3124e769ce845c" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 103 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/takoserver/articles/7a624e38285b16" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a8e904b15787ac49e83b9adee76dba3d141427d8/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--UOOAg-F6--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATypeScript%2525E4%2525BB%2525A5%2525E5%2525A4%252596%2525E3%252581%25258C%2525E5%2525AB%25258C%2525E3%252581%252584%2525E3%252581%2525A7%2525E3%252581%252599%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%25259F%2525E3%252581%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRmNTgyM2RjZDAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="TypeScript以外が嫌いです"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/takoserver/articles/7a624e38285b16" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> TypeScript以外が嫌いです </a> </h4> <a href="/entry/s/zenn.dev/takoserver/articles/7a624e38285b16" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 194 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/2005887.html" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/28c57faad96d9da78a6af24ef3cfed688434838b/height=288;version=1;width=512/https%3A%2F%2Fforest.watch.impress.co.jp%2Fimg%2Fwf%2Flist%2F2005%2F887%2Fimage2.png" alt="2025年4月セキュリティパッチをあてると、Cドライブ直下に「inetpub」という変なフォルダーが作成される／マルウェアのせいなどではなさそう【やじうまの杜】"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/2005887.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 2025年4月セキュリティパッチをあてると、Cドライブ直下に「inetpub」という変なフォルダーが作成される／マルウェアのせいなどではなさそう【やじうまの杜】 </a> </h4> <a href="/entry/s/forest.watch.impress.co.jp/docs/serial/yajiuma/2005887.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 83 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.oreilly.co.jp//books/9784814401055/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2102720c3637e58629f378ec88b443dfe3bd8c66/height=288;version=1;width=512/https%3A%2F%2Fwww.oreilly.co.jp%2Fbooks%2Fimages%2Fpicture_large978-4-8144-0105-5.jpeg" alt="開発者とアーキテクトのためのコミュニケーションガイド"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.oreilly.co.jp//books/9784814401055/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 開発者とアーキテクトのためのコミュニケーションガイド </a> </h4> <a href="/entry/s/www.oreilly.co.jp//books/9784814401055/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 97 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://codezine.jp/article/detail/21127" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/577d01fb745d90886f7d4ba8f46ca3dc57d8dca3/height=288;version=1;width=512/https%3A%2F%2Fcodezine.jp%2Fstatic%2Fimages%2Farticle%2F21127%2F21127_ogp.jpg" alt="1週間で120万人突破の「mixi2」──小規模チームで構築・運用を可能にしたNewSQL「TiDB」とは"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://codezine.jp/article/detail/21127" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 1週間で120万人突破の「mixi2」──小規模チームで構築・運用を可能にしたNewSQL「TiDB」とは </a> </h4> <a href="/entry/s/codezine.jp/article/detail/21127" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 59 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.sbbit.jp/article/fj/161755" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/82cf863aea8a711f8a00870fc33cf022500396d0/height=288;version=1;width=512/https%3A%2F%2Fwww.sbbit.jp%2Farticle%2Fimage%2F161755%2FOGP_bit202504071823018355.jpg" alt="グーグルやアマゾンなどIT大手で「大量解雇」、従来とは「まるで違う」ポイントとは？"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.sbbit.jp/article/fj/161755" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> グーグルやアマゾンなどIT大手で「大量解雇」、従来とは「まるで違う」ポイントとは？ </a> </h4> <a href="/entry/s/www.sbbit.jp/article/fj/161755" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 104 users </a> </div> </li> </ul> </div> </div> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fdotdtech_blog%2Farticles%2Fdcaebb9d5024cc" alt="">Playwright MCPとCursorで、E2Eテストを自動生成してみた〜AI×ブラウザ操作の新アプローチ〜 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" class="js-keyboard-entry-page-openable" title="Playwright MCPとCursorで、E2Eテストを自動生成してみた〜AI×ブラウザ操作の新アプローチ〜 (297 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 297 users </a> </span> </li> <li> <a href="/site/zenn.dev/dotdtech_blog" title="『zenn.dev/dotdtech_blog』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/dotdtech_blog </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要 Playwright MCPとCursorを活用し、E2Eテストをゼロから自動生成してみました。本記事ではその検証プロセスと得られた知見を紹介します。この記事で分かること Playwright MCPでE2Eテストを自動生成する方法 Playwright MCPの活用のヒントはじめに昨今のMCPブームは収まることを知らず、日々新しいMCP Serverが公開されています。そんな中、自動化テストツールとして有名なPlaywrightのMCP Serverが公開されました。 Playwrightには、既にユーザーがブラウザを操作しテストを生成できる非常に便利な機能がありますが、今回はそれを超えるために、ユーザーの代わりにCursor（MCP Client）を使用し、ブラウザの自動操作とE2Eテストの自動生成を行えるのかを検証しました。検証環境 Cursor: claude-s</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/MCP" data-gtm-click-label="entry-search-result-item-tag">MCP</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/Cursor" data-gtm-click-label="entry-search-result-item-tag">Cursor</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/LLM" data-gtm-click-label="entry-search-result-item-tag">LLM</a></li> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">ソフトウェアテスト</a></li> <li><a href="/q/E2E%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">E2Eテスト</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/dotdtech_blog/articles/dcaebb9d5024cc" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0b1532dff633e0fdbdd8d57fbacfdcc9e57e025a/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fC4FVjh0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3APlaywright%252520MCP%2525E3%252581%2525A8Cursor%2525E3%252581%2525A7%2525E3%252580%252581E2E%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252582%252592%2525E8%252587%2525AA%2525E5%25258B%252595%2525E7%252594%25259F%2525E6%252588%252590%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252520%2525E3%252580%25259CAI%2525C3%252597%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%2525E3%252581%2525AE%2525E6%252596%2525B0%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%252581%2525E3%252580%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AKenshin%252520Tatsumi%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzcxNTMxNmU4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AdotD%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JjYzUwOWYxNWIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Playwright MCPとCursorで、E2Eテストを自動生成してみた〜AI×ブラウザ操作の新アプローチ〜" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing_1.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing_1.html" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F23%2Fwebmicrosoft_playwright_testing_1.html" alt="">マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/23/webmicrosoft_playwright_testing_1.html" class="js-keyboard-entry-page-openable" title="マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行 (282 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 282 users </a> </span> </li> <li> <a href="/site/www.publickey1.jp/" title="『www.publickey1.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.publickey1.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/10/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/microsoft" data-gtm-click-label="entry-search-result-item-tag">microsoft</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/publickey" data-gtm-click-label="entry-search-result-item-tag">publickey</a></li> <li><a href="/q/web%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">web開発</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">ソフトウェアテスト</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing_1.html"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing_1.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3a8bbe1e8fb23ebc4845af1fd01d46fb3f35ab9c/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2Fplaywrighttesting_beta01.png" alt="マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing.html" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F23%2Fwebmicrosoft_playwright_testing.html" alt="">マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/23/webmicrosoft_playwright_testing.html" class="js-keyboard-entry-page-openable" title="マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 (255 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 255 users </a> </span> </li> <li> <a href="/site/www.publickey1.jp/" title="『www.publickey1.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.publickey1.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/08/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。具体的には、デスクトップ向けのWebア</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/Microsoft" data-gtm-click-label="entry-search-result-item-tag">Microsoft</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/Azure" data-gtm-click-label="entry-search-result-item-tag">Azure</a></li> <li><a href="/q/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">ソフトウェアテスト</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/%E8%87%AA%E5%8B%95%E5%8C%96" data-gtm-click-label="entry-search-result-item-tag">自動化</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing.html"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.publickey1.jp/blog/23/webmicrosoft_playwright_testing.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/26bb96ed3538939aa93e6476c42e0c99b040d6ae/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2Fplaywrighttesting_pp02.png" alt="マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/cybozu_frontend/articles/6c2a54196f056d"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/cybozu_frontend/articles/6c2a54196f056d" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fcybozu_frontend%2Farticles%2F6c2a54196f056d" alt="">PlaywrightのVSCode拡張を使って効率的にテストを書く </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/cybozu_frontend/articles/6c2a54196f056d" class="js-keyboard-entry-page-openable" title="PlaywrightのVSCode拡張を使って効率的にテストを書く (187 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 187 users </a> </span> </li> <li> <a href="/site/zenn.dev/cybozu_frontend" title="『zenn.dev/cybozu_frontend』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/cybozu_frontend </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/10/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/VSCode" data-gtm-click-label="entry-search-result-item-tag">VSCode</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/tdd" data-gtm-click-label="entry-search-result-item-tag">tdd</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/GUI" data-gtm-click-label="entry-search-result-item-tag">GUI</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/cybozu_frontend/articles/6c2a54196f056d"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/cybozu_frontend/articles/6c2a54196f056d" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4926875accf5ca8bfd19f591b0469436f1879bf5/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--pCV0lqkk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3APlaywright%2525E3%252581%2525AEVSCode%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E5%25258A%2525B9%2525E7%25258E%252587%2525E7%25259A%252584%2525E3%252581%2525AB%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252582%252592%2525E6%25259B%2525B8%2525E3%252581%25258F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3A%2525E3%252581%2525BE%2525E3%252581%2525A3%2525E3%252581%2525A4%2525E3%252583%2525BC%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VjOTA1OThlNjEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%25259C%2525E3%252582%2525A6%2525E3%252582%2525BA%252520%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I2NmEyMTRlMDIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="PlaywrightのVSCode拡張を使って効率的にテストを書く" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://daipresents.com/2024/04/15/playwright-best-practices/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://daipresents.com/2024/04/15/playwright-best-practices/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdaipresents.com%2F2024%2F04%2F15%2Fplaywright-best-practices%2F" alt="">Playwrightのベストプラクティスを翻訳してみた </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/daipresents.com/2024/04/15/playwright-best-practices/" class="js-keyboard-entry-page-openable" title="Playwrightのベストプラクティスを翻訳してみた (179 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 179 users </a> </span> </li> <li> <a href="/site/daipresents.com/" title="『daipresents.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> daipresents.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/04/16</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。原文： Best Practices | Playwright 目次目次イントロダクションテスト哲学ユーザから見えるふるまいをテストするテストはできるだけ分離するサードパーティの依存関係をテストしないデータベースを使ったテストベストプラクティスロケータを使うメソッドチェーンとフィルタリングの使用XPath や CSS セレクタよりもユーザー向けの属性値を優先するロケータの生成codegen を使ってロケータを生成するVS Code 拡張機能を使用してロケーターを生成するウェブファーストのアサーションを使う手動でアサーションを使わないデバッグの設定ローカル環境でデバッグするCIでのデバッグPlaywrightのツールを使うすべてのブラウザでテストPlaywrig</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/API" data-gtm-click-label="entry-search-result-item-tag">API</a></li> <li><a href="/q/TDD" data-gtm-click-label="entry-search-result-item-tag">TDD</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://daipresents.com/2024/04/15/playwright-best-practices/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://daipresents.com/2024/04/15/playwright-best-practices/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ee39b8573c6fa51f77b8d06f745f953338651948/height=288;version=1;width=512/https%3A%2F%2Fdaipresents.com%2Fwp-content%2Fuploads%2F2024%2F04%2Fpick-locator.png" alt="Playwrightのベストプラクティスを翻訳してみた" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/ore88ore/items/bd5a1b65166027806096"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/ore88ore/items/bd5a1b65166027806096" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fore88ore%2Fitems%2Fbd5a1b65166027806096" alt="">Playwright を使いこなすためのベストプラクティス - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/ore88ore/items/bd5a1b65166027806096" class="js-keyboard-entry-page-openable" title="Playwright を使いこなすためのベストプラクティス - Qiita (178 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 178 users </a> </span> </li> <li> <a href="/site/qiita.com/ore88ore" title="『qiita.com/ore88ore』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/ore88ore </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/07/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。テストの独立性を高める可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、１つのテストが失敗しても他のテストに影響しないテストの順序を考慮する必要がないテストをシンプルに保つことができるあたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/TDD" data-gtm-click-label="entry-search-result-item-tag">TDD</a></li> <li><a href="/q/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">コマンド</a></li> <li><a href="/q/%E3%82%B5%E3%82%A4%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">サイト</a></li> <li><a href="/q/dev" data-gtm-click-label="entry-search-result-item-tag">dev</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/ore88ore/items/bd5a1b65166027806096"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/ore88ore/items/bd5a1b65166027806096" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9cd30f877b306c792d8b860c0f75d8c40d866058/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fengineer-festa-ogp-background-074608b13b4bbe67c10ada41e7e2d292.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UGxheXdyaWdodCUyMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4NCVFMyU4MSU5MyVFMyU4MSVBQSVFMyU4MSU5OSVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5OSVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MyU5NyVFMyU4MyVBOSVFMyU4MiVBRiVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZTdjMmJjMDBjY2U4ZDA3ZDZlMzU1ZThiYjI2NjIwMDQ%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBvcmU4OG9yZSZ0eHQtY29sb3I9JTIzRkZGRkZGJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWNmZDUzZTM1NzBmY2UxZmVmOTMxMGE3NzE4YjE4NTY%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4gS0RESeOCouOCuOODo-OCpOODq-mWi-eZuuOCu-ODs-OCv-ODvOagquW8j-S8muekvg%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523FFFFFF%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D0c4dce30623904c2290784a2519cda28" alt="Playwright を使いこなすためのベストプラクティス - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/hrsh7th/articles/d6b10d71c93e18"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/hrsh7th/articles/d6b10d71c93e18" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fhrsh7th%2Farticles%2Fd6b10d71c93e18" alt="">フロントエンドのテスト構成について考えてみた in 2023 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/hrsh7th/articles/d6b10d71c93e18" class="js-keyboard-entry-page-openable" title="フロントエンドのテスト構成について考えてみた in 2023 (164 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 164 users </a> </span> </li> <li> <a href="/site/zenn.dev/hrsh7th" title="『zenn.dev/hrsh7th』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/hrsh7th </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/09/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにこの記事では、フロントエンドの開発において意義のあるテストはなにか？それらをコスパよく実現するためにはどうすればよいか？について考えて、作った構成を紹介します。前提下記の技術スタックを利用していますが、これ以外のスタックでも応用可能な仕組みが多いと思います。 Next.js Storybook playwright msw msw-snapshot （拙作）注意事項この記事の構成は、まだまだ実験的な機能だったり怪しい技術が一部採用されています。 msw-snapshot 拙作のライブラリであって、動作が怪しい可能性がめっちゃあります。 Next.js の testmode playwright + msw を実現するために必要でした。まだまだ全然まともに動かないかもしれません。（サンプルリポジトリの単純なテストは動いた）サンプル下記のリポジトリにサンプルを用意</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/API" data-gtm-click-label="entry-search-result-item-tag">API</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> <li><a href="/q/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">デザイン</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/hrsh7th/articles/d6b10d71c93e18"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/hrsh7th/articles/d6b10d71c93e18" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fcd3c3353b71ad55a27b24feb03edc763a069917/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KQT1NyLE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252581%2525AE%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E8%252580%252583%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252520in%2525202023%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ahrsh7th%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dkYldzTHM5Ti1WQXJnN01Oa1JIQnRuTXc5V0J4VWlPeTludEczN2c9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="フロントエンドのテスト構成について考えてみた in 2023" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fsafetest-a-test-library-offering-a-new-ui-testing-approach%2F" alt="">新しい UI テストの手法を提供するテストライブラリ SafeTest </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/" class="js-keyboard-entry-page-openable" title="新しい UI テストの手法を提供するテストライブラリ SafeTest (147 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 147 users </a> </span> </li> <li> <a href="/site/azukiazusa.dev/" title="『azukiazusa.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> azukiazusa.dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/02/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。従来のフロントエンドのテストの手法は Testing Libra</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1779bbcb24b409578514f4f745cc31a10a14b20b/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Fsafetest-a-test-library-offering-a-new-ui-testing-approach.png" alt="新しい UI テストの手法を提供するテストライブラリ SafeTest" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://kaminashi-developer.hatenablog.jp/entry/2023/12/12/080000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://kaminashi-developer.hatenablog.jp/entry/2023/12/12/080000" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkaminashi-developer.hatenablog.jp%2Fentry%2F2023%2F12%2F12%2F080000" alt="">理想のフロントエンドテストをたずねて三千里 - カミナシエンジニアブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/kaminashi-developer.hatenablog.jp/entry/2023/12/12/080000" class="js-keyboard-entry-page-openable" title="理想のフロントエンドテストをたずねて三千里 - カミナシエンジニアブログ (146 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 146 users </a> </span> </li> <li> <a href="/site/kaminashi-developer.hatenablog.jp/" title="『kaminashi-developer.hatenablog.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> kaminashi-developer.hatenablog.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/12/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。夜明け前カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。しかし、画面全体の機能を網羅する包括的なテスト</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/TDD" data-gtm-click-label="entry-search-result-item-tag">TDD</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/React" data-gtm-click-label="entry-search-result-item-tag">React</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://kaminashi-developer.hatenablog.jp/entry/2023/12/12/080000"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://kaminashi-developer.hatenablog.jp/entry/2023/12/12/080000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b1b1566470d0863743b0fcb574e51bf26d4afd82/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fb5078bee1a9a853071bcee2c8bfab159f14ac589%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkaminashi-developer%252F20231207%252F20231207165100.png" alt="理想のフロントエンドテストをたずねて三千里 - カミナシエンジニアブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.smarthr.jp/entry/playwright"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.smarthr.jp/entry/playwright" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.smarthr.jp%2Fentry%2Fplaywright" alt="">E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.smarthr.jp/entry/playwright" class="js-keyboard-entry-page-openable" title="E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog (140 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 140 users </a> </span> </li> <li> <a href="/site/tech.smarthr.jp/" title="『tech.smarthr.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.smarthr.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/01/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。扱う話題 E2Eテスト基盤を移行する具体的な背景と理由移行における提案から、合意形成までの流れ移行後の開発プロセスがどう変わったか扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明移行作業自体の詳細テストコードの設計・実装に関する具体的なテクニックなお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/E2E%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">E2Eテスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.smarthr.jp/entry/playwright"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.smarthr.jp/entry/playwright" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d290a80e25e85a4ab49573df29a65e0b41d95ccf/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fada5235601690c5efe8f3abe9ea047d8ffd40351%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsmarthr%252F20240117%252F20240117101531.jpg" alt="E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.uzabase.com/entry/2024/04/25/143456"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.uzabase.com/entry/2024/04/25/143456" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.uzabase.com%2Fentry%2F2024%2F04%2F25%2F143456" alt="">Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.uzabase.com/entry/2024/04/25/143456" class="js-keyboard-entry-page-openable" title="Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers (139 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 139 users </a> </span> </li> <li> <a href="/site/tech.uzabase.com/" title="『tech.uzabase.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.uzabase.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/04/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにこんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。先日弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/E2E" data-gtm-click-label="entry-search-result-item-tag">E2E</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/TDD" data-gtm-click-label="entry-search-result-item-tag">TDD</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.uzabase.com/entry/2024/04/25/143456"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.uzabase.com/entry/2024/04/25/143456" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/09db95e9c4c3fa9a6e6ca4cdcc9d6eb8b994645d/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Ffbaa152cd4f5a3cc67a7e2204d2675ca27166458%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fe%252Feeeb%252F20240425%252F20240425141759.png" alt="Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://blog.autify.jp/article/best-practices-for-element-locating-in-e2e-testing"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://blog.autify.jp/article/best-practices-for-element-locating-in-e2e-testing" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.autify.jp%2Farticle%2Fbest-practices-for-element-locating-in-e2e-testing" alt="">E2Eテストにおける要素選択のベストプラクティス｜Autify（オーティファイ）ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/blog.autify.jp/article/best-practices-for-element-locating-in-e2e-testing" class="js-keyboard-entry-page-openable" title="E2Eテストにおける要素選択のベストプラクティス｜Autify（オーティファイ）ブログ (136 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 136 users </a> </span> </li> <li> <a href="/site/blog.autify.jp/" title="『blog.autify.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> blog.autify.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/11/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。Autifyの品質エバンジェリストの末村です。もう5年前にもなりますが、なぜE2Eテストでidを使うべきではないのかという記事を書きました。この記事はありがたいことに長い間閲覧されており、弊社ブログの人気コンテンツの一つとなっています。一方で、5年という歳月はソフトウェア開発のトレンドを変化させるには十分すぎるほどに長いです。テストツールの面では Playwright が新たな選択肢として加わった他、 testing-library によるアクセシビリティ属性を用いた要素探索が新たなベストプラクティスとして登場しています。この記事では、E2Eテストにおける要素探索の考え方の変遷をおさらいしつつ、ベストプラクティスについて説明します。要素選択の考え方まずは、要素選択の考え方についておさらいしておきましょう。要素選択とは、読んで字の如く、Webページ内の特定の要素を探すこと</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/e2e" data-gtm-click-label="entry-search-result-item-tag">e2e</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/library" data-gtm-click-label="entry-search-result-item-tag">library</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E3%82%B3%E3%83%BC%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">コード</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://blog.autify.jp/article/best-practices-for-element-locating-in-e2e-testing"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://blog.autify.jp/article/best-practices-for-element-locating-in-e2e-testing" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/faa18eb7a0c400335254d05c72c9d7ff0a124667/height=288;version=1;width=512/https%3A%2F%2Fcdn.prod.website-files.com%2F6625ee6a0657b5857400452d%2F67330b7da695e56436811b13_blog_ogp.png" alt="E2Eテストにおける要素選択のベストプラクティス｜Autify（オーティファイ）ブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FNakamura-Kaito%2Fitems%2F0e24e5a4e62a77647acc" alt="">【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" class="js-keyboard-entry-page-openable" title="【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita (127 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 127 users </a> </span> </li> <li> <a href="/site/qiita.com/Nakamura-Kaito" title="『qiita.com/Nakamura-Kaito』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/Nakamura-Kaito </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに私は新米プログラマーとして、テスト自動化の複雑さに頭を悩ませていたんですが、Playwright MCPと出会って目から鱗が落ちる体験をしました。今日はその魅力を皆さんと共有したいと思います！テスト自動化の悩みから解放されるPlaywright MCP アプリ開発をしていると、「ユーザーが実際に使うときにちゃんと動くかな？」という不安がつきまといますよね。エンドツーエンドテスト（E2Eテスト）は、UIからAPIまで全体の流れをテストできる素晴らしい方法なんですが、正直言って、従来のやり方はめちゃくちゃ大変でした。複雑なコードを書いたり、テストシナリオを考えたり...。特に私のような新米プログラマーにとっては、高い壁だったんです。でも、Playwright MCPの登場で、この状況が劇的に変わりました！ Playwright MCPの最大の魅力は、自然な日本語のコマンドでブラウ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/Claude" data-gtm-click-label="entry-search-result-item-tag">Claude</a></li> <li><a href="/q/MCP" data-gtm-click-label="entry-search-result-item-tag">MCP</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/LLM" data-gtm-click-label="entry-search-result-item-tag">LLM</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/Nakamura-Kaito/items/0e24e5a4e62a77647acc" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f3f89c5b1e7cbbf8ad9cc71e12ef3740c32e38ba/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzOTY4NTg4JTJGNzczYzFkYzBlMjZmOWRiNDlhNzNlMDI2ZTFkZDcxOTMxNmZlMzJiYSUyRmxhcmdlLnBuZyUzRjE3MzQ5MzI4MTA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9OWJkMjJkNjJhZDQxZGJlMWI0MDliZjdhMWUyZjljMTg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Decc6aa17373bb8b42d565dc03b6dcc21%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJTkwQ2xhdWRlJUUzJTgwJTkxUGxheXdyaWdodC1NQ1AlRTMlODElQTclRTUlQTQlODklRTMlODIlOEYlRTMlODIlOEIlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTglODclQUElRTUlOEIlOTUlRTUlOEMlOTYlRTMlODElQUUlRTQlQjglOTYlRTclOTUlOEMlRUYlQkMlODElRTUlODglOUQlRTUlQkYlODMlRTglODAlODUlRTMlODElQTclRTMlODIlODIlRTQlQkQlQkYlRTMlODElODglRTMlODIlOEJFMkUlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTUlODUlQTUlRTklOTYlODAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz03NDgxNzQwOTlmY2U1OWE3ZTU4NjljOTZjNmI5ODBmYg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBOYWthbXVyYS1LYWl0byZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTY2NmJmMzc3ZjE2OTM3YmI2Y2IwZjViNTJkMWM1YzMy%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2d3988061c4bc8945ace3434a431c33a" alt="【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://playwright.dev/docs/best-practices"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://playwright.dev/docs/best-practices" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fplaywright.dev%2Fdocs%2Fbest-practices" alt="">Best Practices | Playwright </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/playwright.dev/docs/best-practices" class="js-keyboard-entry-page-openable" title="Best Practices | Playwright (126 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 126 users </a> </span> </li> <li> <a href="/site/playwright.dev/" title="『playwright.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> playwright.dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/09/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Introduction This guide should help you to make sure you are following our best practices and writing tests that are more resilient. Testing philosophy Test user-visible behavior Automated tests should verify that the application code works for the end users, and avoid relying on implementation details such as things which users will not typically use, see, or even know about such as the name o</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://playwright.dev/docs/best-practices"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://playwright.dev/docs/best-practices" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/081b0b3f40a2756f176ebd06ddec9dd8414fe932/height=288;version=1;width=512/https%3A%2F%2Frepository-images.githubusercontent.com%2F221981891%2F8c5c6942-c91f-4df1-825f-4cf474056bd7" alt="Best Practices | Playwright" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/kimkiyong/articles/679faf454b0ee0"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/kimkiyong/articles/679faf454b0ee0" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fkimkiyong%2Farticles%2F679faf454b0ee0" alt="">Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/kimkiyong/articles/679faf454b0ee0" class="js-keyboard-entry-page-openable" title="Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合 (122 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 122 users </a> </span> </li> <li> <a href="/site/zenn.dev/kimkiyong" title="『zenn.dev/kimkiyong』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/kimkiyong </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにウェブブラウザの自動操作は長い間、テスト自動化やスクレイピングの重要な分野でしたが、大規模言語モデル（LLM）の台頭により、まったく新しい可能性が開かれつつあります。マイクロソフトの最新プロジェクト「Playwright MCP（Model Context Protocol）」は、LLMとブラウザの間に革新的な橋を架け、AIがより効率的かつ確実にウェブと対話できる世界を実現しています。本記事では、Playwright MCPの技術概要、主要機能、そして実際のビジネスにおける活用事例について探っていきます。 Playwright MCPとは？ Playwright MCPは、マイクロソフトが開発したModel Context Protocol（MCP）サーバーで、Playwrightのブラウザ自動化機能をLLMに提供します。従来の画像認識やスクリーンショットベースのアプローチとは</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/MCP" data-gtm-click-label="entry-search-result-item-tag">MCP</a></li> <li><a href="/q/LLM" data-gtm-click-label="entry-search-result-item-tag">LLM</a></li> <li><a href="/q/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD" data-gtm-click-label="entry-search-result-item-tag">人工知能</a></li> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%9C%80%E6%96%B0%E5%8B%95%E5%90%91" data-gtm-click-label="entry-search-result-item-tag">ブラウザ最新動向</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/Web%E6%A8%99%E6%BA%96" data-gtm-click-label="entry-search-result-item-tag">Web標準</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/kimkiyong/articles/679faf454b0ee0"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/kimkiyong/articles/679faf454b0ee0" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/eee41374055dc1d596af13f79992d9aa7d89c691/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wTKPpHcP--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AMicrosoft%252520Playwright%252520MCP%2525E3%252581%25258C%2525E5%252588%252587%2525E3%252582%25258A%2525E6%25258B%252593%2525E3%252581%25258FLLM%2525E3%252581%2525A8%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E3%252581%2525AE%2525E6%252596%2525B0%2525E3%252581%25259F%2525E3%252581%2525AA%2525E7%2525B5%2525B1%2525E5%252590%252588%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%25258D%2525E3%252582%252587%2525E3%252582%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzZlNGVhN2QzODAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fyusukeiwaki%2Fge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" alt="">個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" class="js-keyboard-entry-page-openable" title="個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡 (117 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 117 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/yusukeiwaki" title="『speakerdeck.com/yusukeiwaki』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/yusukeiwaki </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/02/13</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Developers Summit 2025（2025.02.13-14） - 翔泳社イベント 1日目 13-E-9 あなたのプロダクトが見たい！個人開発リレーセッションで話したときの資料です。 https://event.shoeisha.jp/devsumi/20250213/session/5551</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/OSS" data-gtm-click-label="entry-search-result-item-tag">OSS</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E8%B3%87%E6%96%99" data-gtm-click-label="entry-search-result-item-tag">資料</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/yusukeiwaki/ge-ren-kai-fa-karagong-shi-ji-neng-he-playwrighttorailswotunageta3nian-nogui-ji" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ffed770b416a41e50f1e4d7c53375c21e71bbf5/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F090cada349e14883b171d0e105e6a3db%2Fslide_0.jpg%3F33833469" alt="個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/mizchi/articles/fast-dom-text-search"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mizchi/articles/fast-dom-text-search" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fmizchi%2Farticles%2Ffast-dom-text-search" alt="">Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社) </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mizchi/articles/fast-dom-text-search" class="js-keyboard-entry-page-openable" title="Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社) (110 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 110 users </a> </span> </li> <li> <a href="/site/zenn.dev/mizchi" title="『zenn.dev/mizchi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mizchi </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/10/31</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。以下、敬称略。相談内容ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/DOM" data-gtm-click-label="entry-search-result-item-tag">DOM</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/performance" data-gtm-click-label="entry-search-result-item-tag">performance</a></li> <li><a href="/q/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">パフォーマンス</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/mizchi/articles/fast-dom-text-search"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/mizchi/articles/fast-dom-text-search" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1076df6e3dd3248ba390943a370364254f7e6469/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--BarzZH6G--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3APlaywright%2525E3%252582%252592%2525E5%25258F%252582%2525E8%252580%252583%2525E3%252581%2525AB%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E5%252586%252585%2525E3%252583%252586%2525E3%252582%2525AD%2525E3%252582%2525B9%2525E3%252583%252588%2525E6%2525A4%25259C%2525E7%2525B4%2525A2%2525E3%252582%252592%2525E9%2525AB%252598%2525E9%252580%25259F%2525E5%25258C%252596%2525E3%252581%252599%2525E3%252582%25258B%252520%252528%2525E4%2525BA%25258B%2525E4%2525BE%25258B%2525E7%2525B4%2525B9%2525E4%2525BB%25258B%25253A%2525E3%252582%2525B5%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252583%252591%2525E3%252583%2525BC%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252582%2525B9%2525E3%252582%2525AF%2525E3%252583%2525AA%2525E3%252583%252597%2525E3%252583%252588%2525E6%25258F%252590%2525E4%2525BE%25259B%2525E4%2525BC%25259A%2525E7%2525A4%2525BE%252529%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amizchi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2liclRHT052Z3d3ay1fNGxlcVk4TGNGSlNuX0FoWnpEWVlKaXJNcWc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://github.com/microsoft/playwright-mcp"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://github.com/microsoft/playwright-mcp" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fplaywright-mcp" alt="">GitHub - microsoft/playwright-mcp: Playwright MCP server </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/github.com/microsoft/playwright-mcp" class="js-keyboard-entry-page-openable" title="GitHub - microsoft/playwright-mcp: Playwright MCP server (93 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 93 users </a> </span> </li> <li> <a href="/site/github.com/microsoft" title="『github.com/microsoft』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> github.com/microsoft </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/LLM" data-gtm-click-label="entry-search-result-item-tag">LLM</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/microsoft" data-gtm-click-label="entry-search-result-item-tag">microsoft</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/mcp" data-gtm-click-label="entry-search-result-item-tag">mcp</a></li> <li><a href="/q/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD" data-gtm-click-label="entry-search-result-item-tag">人工知能</a></li> <li><a href="/q/github" data-gtm-click-label="entry-search-result-item-tag">github</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://github.com/microsoft/playwright-mcp"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://github.com/microsoft/playwright-mcp" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3532827a05a572651a41e3a032acc101a11039fb/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F53e4ee213af755cddca06eea55317c92c822abfac5f491ff24bd249973339693%2Fmicrosoft%2Fplaywright-mcp" alt="GitHub - microsoft/playwright-mcp: Playwright MCP server" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://note.com/kyutaro15/n/n39c858e8f65c"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/kyutaro15/n/n39c858e8f65c" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fkyutaro15%2Fn%2Fn39c858e8f65c" alt="">🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/kyutaro15/n/n39c858e8f65c" class="js-keyboard-entry-page-openable" title="🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro (85 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 85 users </a> </span> </li> <li> <a href="/site/note.com/kyutaro15" title="『note.com/kyutaro15』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> note.com/kyutaro15 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！みなさん、「AIがウェブページを自分で操作する」技術で新たな展開がありました。Microsoftが新しく発表した「Playwright MCP」という技術。この記事では、 🧠 Playwright MCPって何？ 🤖 何ができるの？ ☁️ なぜ注目されてるの？という点を、エンジニアではない方にも分かりやすく、やさしい言葉とイメージで解説していきます！ 🧠 Playwright MCPって何？まず名前にある「Playwright」は、Microsoftが開発しているブラウザ自動化のツールです。もともとは、開発者がWebサイトの操作を自動でテストしたり、繰り返し作業を楽にするためのものでした。そこに今回追加されたのが「MCP（Model Context Pro</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/microsoft" data-gtm-click-label="entry-search-result-item-tag">microsoft</a></li> <li><a href="/q/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD" data-gtm-click-label="entry-search-result-item-tag">人工知能</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">プログラミング</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://note.com/kyutaro15/n/n39c858e8f65c"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://note.com/kyutaro15/n/n39c858e8f65c" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d54aa5b5225ad283b270611a0ccb5936d36716c6/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F180573294%2Frectangle_large_type_2_68f0206e27895a71d36cee28a9b6ee8f.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.techtouch.jp/entry/nx-playwright-visual-regression-testing"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.techtouch.jp/entry/nx-playwright-visual-regression-testing" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.techtouch.jp%2Fentry%2Fnx-playwright-visual-regression-testing" alt="">フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.techtouch.jp/entry/nx-playwright-visual-regression-testing" class="js-keyboard-entry-page-openable" title="フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog (84 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 84 users </a> </span> </li> <li> <a href="/site/tech.techtouch.jp/" title="『tech.techtouch.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.techtouch.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/05/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめになぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施するどう賢く実施したか結果まとめ参考資料はじめに「食べログラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！なぜ VRT が必要なのか？フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.techtouch.jp/entry/nx-playwright-visual-regression-testing"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.techtouch.jp/entry/nx-playwright-visual-regression-testing" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/86ce3a16a71f4d3b1bf88caf9142a230594af908/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F2dae6b89609229e00ba48e27557f9987b4cb48e9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fh%252Fhomemade-ramen%252F20240521%252F20240521122207.png" alt="フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.uzabase.com/entry/2024/05/31/153530"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.uzabase.com/entry/2024/05/31/153530" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.uzabase.com%2Fentry%2F2024%2F05%2F31%2F153530" alt="">Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.uzabase.com/entry/2024/05/31/153530" class="js-keyboard-entry-page-openable" title="Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers (81 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 81 users </a> </span> </li> <li> <a href="/site/tech.uzabase.com/" title="『tech.uzabase.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.uzabase.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/05/31</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにこんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。本記事では主に「②開発環境デプロイ後」を例に紹介します。実行方法具</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.uzabase.com/entry/2024/05/31/153530"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.uzabase.com/entry/2024/05/31/153530" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/80f33dc9dc117ab4f1a1aa4b5f6701aef284d813/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F67fcd1f6a56131ef885192a9ae7514f455076232%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fe%252Feeeb%252F20240531%252F20240531174731.png" alt="Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://blog.cybozu.io/entry/2022/03/18/100000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://blog.cybozu.io/entry/2022/03/18/100000" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.cybozu.io%2Fentry%2F2022%2F03%2F18%2F100000" alt="">Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/blog.cybozu.io/entry/2022/03/18/100000" class="js-keyboard-entry-page-openable" title="Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ (80 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 80 users </a> </span> </li> <li> <a href="/site/blog.cybozu.io/" title="『blog.cybozu.io』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> blog.cybozu.io </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/03/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは！フロントエンドエキスパートチームの @mugi_uno です。みなさんは Visual Regression Test は普段活用していますか？昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。フロントエンドリアーキテクチャとサイレントリリース現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/cybozu" data-gtm-click-label="entry-search-result-item-tag">cybozu</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://blog.cybozu.io/entry/2022/03/18/100000"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://blog.cybozu.io/entry/2022/03/18/100000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/23ee031d0d5929ee4c3320e2b99ab7a8a3bc5115/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc23ea67d7da5bafda29ee0962a14616a7dfefff3%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fc%252Fcybozuinsideout%252F20220317%252F20220317133454.jpg" alt="Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fmh4gf%2Farticles%2Ftiny-vrt-with-github-actions" alt="">GitHub Actions のみで、actions/cache も使わない最軽量の VRT </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions" class="js-keyboard-entry-page-openable" title="GitHub Actions のみで、actions/cache も使わない最軽量の VRT (75 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 75 users </a> </span> </li> <li> <a href="/site/zenn.dev/mh4gf" title="『zenn.dev/mh4gf』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mh4gf </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/12/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージや GitHub Actions の actions/cache を使用する場合などコミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/VRT" data-gtm-click-label="entry-search-result-item-tag">VRT</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/github" data-gtm-click-label="entry-search-result-item-tag">github</a></li> <li><a href="/q/CI" data-gtm-click-label="entry-search-result-item-tag">CI</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/838ef4fe952602cf9bbe842a0228783231752f2c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KXzMiHJ2--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AGitHub%252520Actions%252520%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E3%252581%2525A7%2525E3%252580%252581actions%25252Fcache%252520%2525E3%252582%252582%2525E4%2525BD%2525BF%2525E3%252582%25258F%2525E3%252581%2525AA%2525E3%252581%252584%2525E6%25259C%252580%2525E8%2525BB%2525BD%2525E9%252587%25258F%2525E3%252581%2525AE%252520VRT%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AHirotaka%252520Miyagi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU1OTAwOGYzMmYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="GitHub Actions のみで、actions/cache も使わない最軽量の VRT" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/rhumie/introduction-to-e2e-testing-with-playwright"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/rhumie/introduction-to-e2e-testing-with-playwright" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Frhumie%2Fintroduction-to-e2e-testing-with-playwright" alt="">PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/rhumie/introduction-to-e2e-testing-with-playwright" class="js-keyboard-entry-page-openable" title="PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright (75 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 75 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/rhumie" title="『speakerdeck.com/rhumie』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/rhumie </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/09/03</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/dev" data-gtm-click-label="entry-search-result-item-tag">dev</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/rhumie/introduction-to-e2e-testing-with-playwright"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/rhumie/introduction-to-e2e-testing-with-playwright" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/49472d9cbd0019004a997b964cb4c781ceb31965/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F1d15990c9b9e47798f717ea6fd55d623%2Fslide_0.jpg%3F31581140" alt="PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/lclco/articles/3f3801e685cbcc"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/lclco/articles/3f3801e685cbcc" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Flclco%2Farticles%2F3f3801e685cbcc" alt="">StorybookとPlaywrightがもたらす画期的なUIテスト </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/lclco/articles/3f3801e685cbcc" class="js-keyboard-entry-page-openable" title="StorybookとPlaywrightがもたらす画期的なUIテスト (75 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 75 users </a> </span> </li> <li> <a href="/site/zenn.dev/lclco" title="『zenn.dev/lclco』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/lclco </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/04/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。今回の記事で紹介するテストは以下のリポジトリで公開しています。具体的には以下の点が最高でした。独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/lclco/articles/3f3801e685cbcc"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/lclco/articles/3f3801e685cbcc" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/41f3f0921befcf41380fe6b5baa79a6401d11116/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--vGsHw2nc--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AStorybook%2525E3%252581%2525A8Playwright%2525E3%252581%25258C%2525E3%252582%252582%2525E3%252581%25259F%2525E3%252582%252589%2525E3%252581%252599%2525E7%252594%2525BB%2525E6%25259C%25259F%2525E7%25259A%252584%2525E3%252581%2525AAUI%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Akavis777%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2NiYzlhY2Y4M2EuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ALCL%252520Engineers%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM2NjU3NGM5N2UuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="StorybookとPlaywrightがもたらす画期的なUIテスト" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/loglass/articles/visual-regression-testing-comparison"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/loglass/articles/visual-regression-testing-comparison" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Floglass%2Farticles%2Fvisual-regression-testing-comparison" alt="">2023年にVisual Regression Testingを始めるならどんな選択肢があるか </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/loglass/articles/visual-regression-testing-comparison" class="js-keyboard-entry-page-openable" title="2023年にVisual Regression Testingを始めるならどんな選択肢があるか (74 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 74 users </a> </span> </li> <li> <a href="/site/zenn.dev/loglass" title="『zenn.dev/loglass』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/loglass </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/12/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにフロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。ここ数年で広く普及し、用語としても一般的になったように思います。私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。なお、今回紹介するツールはすべてこちらのリポジトリで試しています。具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/storybook" data-gtm-click-label="entry-search-result-item-tag">storybook</a></li> <li><a href="/q/VRT" data-gtm-click-label="entry-search-result-item-tag">VRT</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/Test" data-gtm-click-label="entry-search-result-item-tag">Test</a></li> <li><a href="/q/%E7%94%BB%E5%83%8F" data-gtm-click-label="entry-search-result-item-tag">画像</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/loglass/articles/visual-regression-testing-comparison"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/loglass/articles/visual-regression-testing-comparison" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f2eead9fff72fea73dfdc28e4fc899b7a6b56563/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--_fqIXlLW--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A2023%2525E5%2525B9%2525B4%2525E3%252581%2525ABVisual%252520Regression%252520Testing%2525E3%252582%252592%2525E5%2525A7%25258B%2525E3%252582%252581%2525E3%252582%25258B%2525E3%252581%2525AA%2525E3%252582%252589%2525E3%252581%2525A9%2525E3%252582%252593%2525E3%252581%2525AA%2525E9%252581%2525B8%2525E6%25258A%25259E%2525E8%252582%2525A2%2525E3%252581%25258C%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AShingo%252520Yamazaki%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRlNWQ4ZTRjZjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BE%2525E3%252583%2525AD%2525E3%252582%2525B0%2525E3%252583%2525A9%2525E3%252582%2525B9%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lsN0pQbDM5OE9wemtMWU9jcVRUSHgzQi0xRC1wQXkwS0t3T29iRFE9czI1MC1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="2023年にVisual Regression Testingを始めるならどんな選択肢があるか" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/togami2864/articles/65af759b4a34f6"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/togami2864/articles/65af759b4a34f6" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ftogami2864%2Farticles%2F65af759b4a34f6" alt="">次世代のブラウザテスト自動化プロトコルWeb Driver BiDi </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/togami2864/articles/65af759b4a34f6" class="js-keyboard-entry-page-openable" title="次世代のブラウザテスト自動化プロトコルWeb Driver BiDi (73 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 73 users </a> </span> </li> <li> <a href="/site/zenn.dev/togami2864" title="『zenn.dev/togami2864』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/togami2864 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/09/03</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Seleniumの独自実装が元となって2018年にはW3C勧告として標準化されました。[1] 言葉の使い方が非常にややこしいのですが、ここでいうW3CのWebDriverはChrome Driver, geckodriverといった具体的な実装ではなく、ブラウザを自動化するためのAPIとプロトコルを規定したものを指しています。 Selenium4を例にとるとWebDriver型のツールは次の流れで動作しています。 Driverに対してクライアントから自動化コマンドを送る Driverが実際のブラウザ操作に変換し、ブラウザを自動操作 Architecture of Selenium WebDriver この方式はW3Cの標準が存在しクロスブラウザ対応が容易な点でメリットがあります。一方で仕組み上flakyになりやすかったり、websocketを使った実装に比べて低速であるというデメリットがあ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Selenium" data-gtm-click-label="entry-search-result-item-tag">Selenium</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/%21%21" data-gtm-click-label="entry-search-result-item-tag">!!</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/togami2864/articles/65af759b4a34f6"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/togami2864/articles/65af759b4a34f6" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/72ab788f1f2ab4014248cea4b63f4547b0b077e4/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--q1IDdpFs--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E6%2525AC%2525A1%2525E4%2525B8%252596%2525E4%2525BB%2525A3%2525E3%252581%2525AE%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E8%252587%2525AA%2525E5%25258B%252595%2525E5%25258C%252596%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252583%252588%2525E3%252582%2525B3%2525E3%252583%2525ABWeb%252520Driver%252520BiDi%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Atogami%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk3OGRmNTQ0ODkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="次世代のブラウザテスト自動化プロトコルWeb Driver BiDi" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/tomoasleep/rails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/tomoasleep/rails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Ftomoasleep%2Frails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta" alt="">Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/tomoasleep/rails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta" class="js-keyboard-entry-page-openable" title="Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った (71 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 71 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/tomoasleep" title="『speakerdeck.com/tomoasleep』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/tomoasleep </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/11/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Omotesando.rb #91 (https://omotesandorb.connpass.com/event/299381/) で発表した資料です。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/debug" data-gtm-click-label="entry-search-result-item-tag">debug</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/tomoasleep/rails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/tomoasleep/rails-noburauzatesutowo-playwright-dedong-kasuyounisitaradebatugugajian-dan-ninatutebu-tuta" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e6f6ef4dace49c3fa87458a879be82eff2f61bf4/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fbaa280663fc6476faf2e5e3e64871ac9%2Fslide_0.jpg%3F27662019" alt="Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://dev.classmethod.jp/articles/playwright-e2e/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://dev.classmethod.jp/articles/playwright-e2e/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdev.classmethod.jp%2Farticles%2Fplaywright-e2e%2F" alt="">WEBアプリのE2Eテストを自動化 ~ Playwrightの機能紹介とコード例 | DevelopersIO </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/dev.classmethod.jp/articles/playwright-e2e/" class="js-keyboard-entry-page-openable" title="WEBアプリのE2Eテストを自動化 ~ Playwrightの機能紹介とコード例 | DevelopersIO (69 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 69 users </a> </span> </li> <li> <a href="/site/dev.classmethod.jp/" title="『dev.classmethod.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> dev.classmethod.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/01/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">npm init playwright@latest 実行すると @playwright/testがインストール playwrightの設定ファイル(playwright.config.ts)が追加サンプル用のテストコードが追加が行われます。テストコード自動生成 playwrightにはブラウザ操作でテストコードを生成する機能があります。 package.jsonのscriptsに以下を追加してnpm run test:genするか、 "test:gen" : "playwright codegen" npxでも実行できます。引数のURLは任意です。 npx playwright codegen http://localhost:3000/</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/%2A%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">*あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://dev.classmethod.jp/articles/playwright-e2e/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://dev.classmethod.jp/articles/playwright-e2e/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a9569ba376269c488fe5b3eb8db6a8cf97263c26/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F01%2Fplaywright-icatch.jpeg" alt="WEBアプリのE2Eテストを自動化 ~ Playwrightの機能紹介とコード例 | DevelopersIO" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.basemachina.jp/entry/live-preview-with-playwright"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.basemachina.jp/entry/live-preview-with-playwright" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.basemachina.jp%2Fentry%2Flive-preview-with-playwright" alt="">Playwrightでライブプレビューツールを実装する - ベースマキナエンジニアブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.basemachina.jp/entry/live-preview-with-playwright" class="js-keyboard-entry-page-openable" title="Playwrightでライブプレビューツールを実装する - ベースマキナエンジニアブログ (69 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 69 users </a> </span> </li> <li> <a href="/site/tech.basemachina.jp/" title="『tech.basemachina.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.basemachina.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/08/30</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、yebis0942です。先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。ビュー機能とはローカル環境で開発したい bm-view-previewの内部構成ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにするウィンドウを表示するウィンドウのリサイズに対応するダイアログを自動で閉じないできなかったことアプリ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2" data-gtm-click-label="entry-search-result-item-tag">エンジニア</a></li> <li><a href="/q/browser" data-gtm-click-label="entry-search-result-item-tag">browser</a></li> <li><a href="/q/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC" data-gtm-click-label="entry-search-result-item-tag">テクノロジー</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.basemachina.jp/entry/live-preview-with-playwright"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.basemachina.jp/entry/live-preview-with-playwright" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9e786bcac95367fa1cdb305b4d8b8108f823db26/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3fea97fdab66225ca8fc06f4bab3d085d735a584%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fy%252Fyebis0942%252F20240830%252F20240830171916.png" alt="Playwrightでライブプレビューツールを実装する - ベースマキナエンジニアブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/Baplisca/items/08d9ce726ade52a0c1f5"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/Baplisca/items/08d9ce726ade52a0c1f5" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FBaplisca%2Fitems%2F08d9ce726ade52a0c1f5" alt="">チーム開発におけるテスト自動化の壁：難易度別の課題と解決策 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/Baplisca/items/08d9ce726ade52a0c1f5" class="js-keyboard-entry-page-openable" title="チーム開発におけるテスト自動化の壁：難易度別の課題と解決策 - Qiita (66 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 66 users </a> </span> </li> <li> <a href="/site/qiita.com/Baplisca" title="『qiita.com/Baplisca』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/Baplisca </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/01/01</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">テスト自動化のすすめみなさんテストはしていますか？学生の開発の場合完成することが優先で、そこまでテストはしてこなかったと思いますが社会人になるとそうはいきません。同じテスト内容・テスト結果であれば、手作業・目視で確認するのはあまりに非効率です。自動化して、楽になりたいと思いませんか？テストの種類によっては自動化できるものと自動化が難しいものがあり、各テストの自動化の実装コストとメンテナンスコストについて考えました。テストの種類アプリケーション開発におけるテストの種類・単体テスト・システムテスト・レグレッションテスト・UIテスト・パフォーマンステスト・セキュリティテスト・クロスブラウザテスト・モバイルテスト単体テスト概要: 最小単位のコード（関数、メソッド、クラスなど）を対象に、その動作が期待通りであるかを確認するテスト。外部依存を排除し、単独で機能することを</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> <li><a href="/q/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" data-gtm-click-label="entry-search-result-item-tag">セキュリティ</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/Baplisca/items/08d9ce726ade52a0c1f5"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/Baplisca/items/08d9ce726ade52a0c1f5" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8429399f0e22bc2b8190b5ed41f1a150add905e4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRmF2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tJTJGdSUyRjY1ODE0NzMyJTNGdiUzRDQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ODQwYTQwNjNlYjQxNGZhNDkxNTBiN2I1ZjlmZGI5MDU%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D18b9ed8fb0893f269d9184b6cf1ef2d9%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgzJTgxJUUzJTgzJUJDJUUzJTgzJUEwJUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJUFCJUUzJTgxJThBJUUzJTgxJTkxJUUzJTgyJThCJUUzJTgzJTg2JUUzJTgyJUI5JUUzJTgzJTg4JUU4JTg3JUFBJUU1JThCJTk1JUU1JThDJTk2JUUzJTgxJUFFJUU1JUEzJTgxJUVGJUJDJTlBJUU5JTlCJUEzJUU2JTk4JTkzJUU1JUJBJUE2JUU1JTg4JUE1JUUzJTgxJUFFJUU4JUFBJUIyJUU5JUExJThDJUUzJTgxJUE4JUU4JUE3JUEzJUU2JUIxJUJBJUU3JUFEJTk2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NDk4ZWIzY2NjM2NlNDUyOTkzYTUxODkxZTkwODQ0NWI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBCYXBsaXNjYSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTA3OTAyODkwOTYwOTExYzBjYmFiN2RkNjRhYTRjMGQ5%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D442da4396088d0ccaa33d1e36acbdaf0" alt="チーム開発におけるテスト自動化の壁：難易度別の課題と解決策 - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/spacemarket/articles/dbe28fda1e49e7"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/spacemarket/articles/dbe28fda1e49e7" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fspacemarket%2Farticles%2Fdbe28fda1e49e7" alt="">[Playwright]VScodeの拡張機能でらくらくブラウザ操作 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/spacemarket/articles/dbe28fda1e49e7" class="js-keyboard-entry-page-openable" title="[Playwright]VScodeの拡張機能でらくらくブラウザ操作 (65 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 65 users </a> </span> </li> <li> <a href="/site/zenn.dev/spacemarket" title="『zenn.dev/spacemarket』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/spacemarket </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/05/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにこんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。 4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。 Playwrightとは PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。 Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。環境 node 20.9.0 playwright 1.44.0 拡張機能のインストール今回使用するVScode</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Playwright" data-gtm-click-label="entry-search-result-item-tag">Playwright</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/spacemarket/articles/dbe28fda1e49e7"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/spacemarket/articles/dbe28fda1e49e7" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/aeab1ee552bc8ea8fc414d63e3cd992eb142f720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--V4XD7bFE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BPlaywright%25255DVScode%2525E3%252581%2525AE%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A7%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252582%252589%2525E3%252581%25258F%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252582%2525A6%2525E3%252582%2525B6%2525E6%252593%25258D%2525E4%2525BD%25259C%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adumbled0re%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc1NTA1NzM5OGYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B9%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B9%2525E3%252583%25259E%2525E3%252583%2525BC%2525E3%252582%2525B1%2525E3%252583%252583%2525E3%252583%252588%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1MTY4OGExZGEuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="[Playwright]VScodeの拡張機能でらくらくブラウザ操作" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.checklyhq.com%2Fblog%2Fcypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison%2F" alt="">Cypress vs Selenium vs Playwright vs Puppeteer: Speed </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/" class="js-keyboard-entry-page-openable" title="Cypress vs Selenium vs Playwright vs Puppeteer: Speed (64 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 64 users </a> </span> </li> <li> <a href="/site/www.checklyhq.com/" title="『www.checklyhq.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.checklyhq.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/02/01</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Synthetic MonitoringProactive, uptime & end-to-end monitoring with Playwright</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/selenium" data-gtm-click-label="entry-search-result-item-tag">selenium</a></li> <li><a href="/q/cypress" data-gtm-click-label="entry-search-result-item-tag">cypress</a></li> <li><a href="/q/puppeteer" data-gtm-click-label="entry-search-result-item-tag">puppeteer</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/TDD" data-gtm-click-label="entry-search-result-item-tag">TDD</a></li> <li><a href="/q/performance" data-gtm-click-label="entry-search-result-item-tag">performance</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.checklyhq.com/blog/cypress-vs-selenium-vs-playwright-vs-puppeteer-speed-comparison/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/da9fefaf7e0df20a8a613146e3484abbdc97e46a/height=288;version=1;width=512/https%3A%2F%2Fcdn.raster.app%2Fcheckly%2Fbrand%2FkFYtw1bGAG%3Fixlib%3Djs-3.8.0%26s%3D0f473f81cc03a7a1df553fc0879711a7" alt="Cypress vs Selenium vs Playwright vs Puppeteer: Speed" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fcr_murai%2Fitems%2F13e55eab7e21f6f29619" alt="">Playwright MCP技術解説〜次世代ブラウザ自動化の可能性〜 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/cr_murai/items/13e55eab7e21f6f29619" class="js-keyboard-entry-page-openable" title="Playwright MCP技術解説〜次世代ブラウザ自動化の可能性〜 - Qiita (64 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 64 users </a> </span> </li> <li> <a href="/site/qiita.com/cr_murai" title="『qiita.com/cr_murai』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/cr_murai </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに C-RISEの村井です。当社はクラウドBOTというブラウザ自動化サービスを提供しています。クラウドBOTは、ブラウザ操作の自動化をよりシンプルに、そして多くの人にとって身近なものにするため開発してきました。プログラミング不要で誰でも業務自動化ができることを目指し、これまで数多くのアップデートを重ねてきました。そして、今月プレビュー版として公開したCloud BOT Operatorは、RPAによる定型操作ロボットという枠組みから一歩踏み出し、AIによる自動操作ロボットとしての可能性に挑戦しました。エージェントが</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/LLM" data-gtm-click-label="entry-search-result-item-tag">LLM</a></li> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/mcp" data-gtm-click-label="entry-search-result-item-tag">mcp</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" data-gtm-click-label="entry-search-result-item-tag">ブラウザ</a></li> <li><a href="/q/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD" data-gtm-click-label="entry-search-result-item-tag">人工知能</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/tool" data-gtm-click-label="entry-search-result-item-tag">tool</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/cr_murai/items/13e55eab7e21f6f29619" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/72f4ff2a8add2fddb42bc450479e9f6f33d7e427/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2MzU5NSUyRmZmNmNlMTgwMDg2N2Y4YTU3Y2RmNTk5ZmI0YzA5ZGIwZjUxNWZjNmMlMkZsYXJnZS5wbmclM0YxNjA4NTY2OTYwP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTk3YjE4NjEyYWE1YjJjNTVlNGNmMGJmMWMwYWRjMGVh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Ddb4bb24093222e7b64086a741a2f1efe%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9UGxheXdyaWdodCUyME1DUCVFNiU4QSU4MCVFOCVBMSU5MyVFOCVBNyVBMyVFOCVBQSVBQyUyMCUyMCVFMyU4MCU5QyVFNiVBQyVBMSVFNCVCOCU5NiVFNCVCQiVBMyVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFOCU4NyVBQSVFNSU4QiU5NSVFNSU4QyU5NiVFMyU4MSVBRSVFNSU4RiVBRiVFOCU4MyVCRCVFNiU4MCVBNyVFMyU4MCU5QyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWE0MzM2OWFjZTk4OThmYTZiZGI0MGFlNDBhZjVkODlk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjcl9tdXJhaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTg1Mjc3MWYyZjIzMDI4NTg1NTMxZGVmZGVkOTA3ZjE3%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D973dabcac953038039dc17e64eb58d9f" alt="Playwright MCP技術解説〜次世代ブラウザ自動化の可能性〜 - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdevelopers.prtimes.jp%2F2023%2F04%2F10%2Fmigrate-from-cypress-to-playwright%2F" alt="">CypressからPlaywrightに移行しました | PR TIMES 開発者ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright/" class="js-keyboard-entry-page-openable" title="CypressからPlaywrightに移行しました | PR TIMES 開発者ブログ (63 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 63 users </a> </span> </li> <li> <a href="/site/developers.prtimes.jp/" title="『developers.prtimes.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> developers.prtimes.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/04/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。なぜ移行したのかいくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右されることがなく、全てのテストを並列で実行可能でした。しかし、Cypressは並列でテストを実行することができず、テストを直列で実行するしかなかったため、テストの完了までに時間がかかってしまう問題がありました。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/TEST" data-gtm-click-label="entry-search-result-item-tag">TEST</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%2A%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">*あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://developers.prtimes.jp/2023/04/10/migrate-from-cypress-to-playwright/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7733bf6509fd93a6c9b01da1bc6955a76ed7b844/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.prtimes.jp%2Fwp-content%2Fuploads%2F2023%2F04%2Fmigrate-from-cypress-to-playwright.png" alt="CypressからPlaywrightに移行しました | PR TIMES 開発者ブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://mh4gf.dev/articles/axe-core-playwright-and-markuplint"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://mh4gf.dev/articles/axe-core-playwright-and-markuplint" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmh4gf.dev%2Farticles%2Faxe-core-playwright-and-markuplint" alt="">axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/mh4gf.dev/articles/axe-core-playwright-and-markuplint" class="js-keyboard-entry-page-openable" title="axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした (63 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 63 users </a> </span> </li> <li> <a href="/site/mh4gf.dev/" title="『mh4gf.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> mh4gf.dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/03/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/playwright" data-gtm-click-label="entry-search-result-item-tag">playwright</a></li> <li><a href="/q/accessibility" data-gtm-click-label="entry-search-result-item-tag">accessibility</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/a11y" data-gtm-click-label="entry-search-result-item-tag">a11y</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3" data-gtm-click-label="entry-search-result-item-tag">アクセシビリティ</a></li> <li><a href="/q/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://mh4gf.dev/articles/axe-core-playwright-and-markuplint"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://mh4gf.dev/articles/axe-core-playwright-and-markuplint" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/449a9aac6250b8a1cc95f9f1b2e4c5895f15bdf1/height=288;version=1;width=512/https%3A%2F%2Fmh4gf.dev%2Farticles%2Faxe-core-playwright-and-markuplint%2Fopengraph-image%3Fee48a78807af2976" alt="axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> </ul> <div class="centerarticle-pager "> <span>1</span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/playwright?page=2" class="js-keyboard-openable">2</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/playwright?page=3" class="js-keyboard-openable">3</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/playwright?page=4" class="js-keyboard-openable">4</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/playwright?page=5" class="js-keyboard-openable">5</a></span> <span class="centerarticle-pager-next js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/playwright?page=2" class="js-keyboard-openable">次のページ</a></span> </div> </div> <ins id="entrysearch-ad-rectangle-middle-sp" class="entrylist-ad-sp-fluid for-sp"></ins> <div id="entrysearch-ad-rectangle-bottom-sp" class="touch-ad-rectangle"></div> </div> <div class="entry-wrapper"> <section class="entry-group"> <h2 class="entry-group-sectionTitle">新着記事</h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/nikkan-spa.jp/2074113" title="お米の高騰に苦しむ人々の悲鳴。主食を麺に替えたり、サツマイモを混ぜる家庭も…フードバンクではおかずよりコメを求める人が増 | 日刊SPA!" data-gtm-label="entry-recentEntriesInEntrySearch-title">お米の高騰に苦しむ人々の悲鳴。主食を麺に替えたり、サツマイモを混ぜる家庭も…フードバンクではおかずよりコメを求める人が増 | 日刊SPA!</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/nikkan-spa.jp/2074113" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/nikkan-spa.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnikkan-spa.jp%2F2074113" alt="">nikkan-spa.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/note.com/komzweb/n/ncbb6379186de" title="Biome が Prettier + ESLint の時代に終わりを告げる｜komz" data-gtm-label="entry-recentEntriesInEntrySearch-title">Biome が Prettier + ESLint の時代に終わりを告げる｜komz</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/note.com/komzweb/n/ncbb6379186de" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/note.com/komzweb" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fkomzweb%2Fn%2Fncbb6379186de" alt="">note.com/komzweb</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/anond.hatelabo.jp/20250411123303" title="カツ丼って卵いらなくないか？" data-gtm-label="entry-recentEntriesInEntrySearch-title">カツ丼って卵いらなくないか？</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/anond.hatelabo.jp/20250411123303" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/anond.hatelabo.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fanond.hatelabo.jp%2F20250411123303" alt="">anond.hatelabo.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.vevioz.com/read-blog/325758_12-ways-to-contact-customer-service-of-delta-airlines-by-phone-number-step-by-st.html" title="12 Ways to Contact Customer Service of Delta Airlines by Phone Number: Step-by-Step Guide" data-gtm-label="entry-recentEntriesInEntrySearch-title">12 Ways to Contact Customer Service of Delta Airlines by Phone Number: Step-by-Step Guide</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.vevioz.com/read-blog/325758_12-ways-to-contact-customer-service-of-delta-airlines-by-phone-number-step-by-st.html" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.vevioz.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.vevioz.com%2Fread-blog%2F325758_12-ways-to-contact-customer-service-of-delta-airlines-by-phone-number-step-by-st.html" alt="">www.vevioz.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/taustation.com/python3-index-by-enumerate/" title="Python3 – enumerateでリストのインデックスが得られる – TauStation" data-gtm-label="entry-recentEntriesInEntrySearch-title">Python3 – enumerateでリストのインデックスが得られる – TauStation</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/taustation.com/python3-index-by-enumerate/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/taustation.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Ftaustation.com%2Fpython3-index-by-enumerate%2F" alt="">taustation.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.youtube.com/shorts/bVVpXrFhQIo" title="- YouTube" data-gtm-label="entry-recentEntriesInEntrySearch-title">- YouTube</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.youtube.com/shorts/bVVpXrFhQIo" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.youtube.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.youtube.com%2Fshorts%2FbVVpXrFhQIo" alt="">www.youtube.com</a></span></p> </div> </div> </li> </ul> </section> </div> </div> <div id="keyboard-shortcut-help" class="shortcut-help is-hidden"> <h3 class="shortcut-help-title">キーボードショートカット一覧</h3> <p><span class="shortcut-help-key">j</span>次のブックマーク</p> <p><span class="shortcut-help-key">k</span>前のブックマーク</p> <p><span class="shortcut-help-key">l</span>あとで読む</p> <p><span class="shortcut-help-key">e</span>コメント一覧を開く</p> <p><span class="shortcut-help-key">o</span>ページを開く</p> <button tyle="button" class="shortcut-help-close js-close-button">✕</button> </div> <script type="text/javascript"> // ---------------- dfp section ---------------- var valve = valve || []; if (isMobile()) { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_overlay_sp', sizes: [[320,80],[320,70],[320,50]], slotId: 'touch-footer-ad' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_rectangle_bottom_sp', sizes: [[300,250]], slotId: 'entrysearch-ad-rectangle-bottom-sp' }); v.sealDFPSlots(); }); } else { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_top_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-top' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_bottom_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-bottom' }); v.sealDFPSlots(); }); } // ---------------- ydn section ---------------- if (isMobile()) { valve.push(function(v) { v.defineFluidSlot({ insId: 'entrysearch-ad-rectangle-middle-sp', yadsAdDs: '62199_242886' }); }); } </script> <script> var valve = window.valve || []; valve.push(function(v) { var pageKeyValues = {}; if (document.cookie.split(';').some(function(item) { return item.indexOf('202011_guest_status=register_incomplete') >= 0})) { pageKeyValues.bookmark_status = 'register_incomplete'; } v.config({ pageKeyValues: pageKeyValues, textSelector: ".entry-search-articles", content: { result: "ng" }, service: 'bookmark' }); }); </script> <script src="https://cdn.pool.st-hatena.com/valve/valve.js" async></script> <div class="footer"> <div class="footer-inner"> <div class="footer-inner-group footer-bookmark"> <h2 class="footer-title"><a href="/" data-gtm-label="footer-btop">はてなブックマーク</a></h2> <div class="footer-list-wrapper"> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/all" class="hotentry js-keyboard-openable" data-gtm-label="footerCategories-hotentry">総合</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/general" class="general js-keyboard-openable" data-gtm-label="footerCategories-general">一般</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/social" class="cat-social js-keyboard-openable" data-gtm-label="footerCategories-social">世の中</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/economics" class="cat-economics js-keyboard-openable" data-gtm-label="footerCategories-economics">政治と経済</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/life" class="cat-life js-keyboard-openable" data-gtm-label="footerCategories-life">暮らし</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/knowledge" class="cat-knowledge js-keyboard-openable" data-gtm-label="footerCategories-knowledge">学び</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/it" class="cat-it js-keyboard-openable" data-gtm-label="footerCategories-it">テクノロジー</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/entertainment" class="cat-entertainment js-keyboard-openable" data-gtm-label="footerCategories-entertainment">エンタメ</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/game" class="cat-game js-keyboard-openable" data-gtm-label="footerCategories-game">アニメとゲーム</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/fun" class="cat-fun js-keyboard-openable" data-gtm-label="footerCategories-fun">おもしろ</a></li> </ul> <ul class="footer-list"> <li class="footer-list-item"><a href="/guide/tools">アプリ・拡張機能</a></li> <li class="footer-list-item"><a href="https://bookmark.hatenastaff.com/">開発ブログ</a></li> <li class="footer-list-item"><a href="/help/">ヘルプ</a></li> <li class="footer-list-item"><a href="https://hatena.zendesk.com/hc/ja/categories/900000153166">お問い合わせ</a></li> <li class="footer-list-item footer-list-item--sp"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item footer-list-item--pc"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> </div> </div> <div class="footer-inner-group footer-bookmark-sns"> <h2 class="footer-title">公式Twitter</h2> <div class="footer-bookmark-list"> <ul class="footer-list"> <li class="footer-list-item"><a href="https://twitter.com/HatenaBookmark" target="_blank" rel="noopener" data-gtm-click-label="footer-officialTwitter-name">公式アカウント</a></li> <li class="footer-list-item"><a href="https://twitter.com/hatebu" target="_blank" rel="noopener" data-gtm-click-label="footer-hotentryTwitter-name">ホットエントリー</a></li> </ul> </div> </div> <div class="footer-inner-group footer-hatena"> <h2 class="footer-title">はてなのサービス</h2> <ul class="footer-list"> <li class="footer-list-item"><a href="https://hatenablog.com/" data-gtm-label="footerServices-blog">はてなブログ</a></li> <li class="footer-list-item"><a href="https://hatenablog.com/guide/pro?plus_via=hatenabookmark_footer&utm_source=hatenabookmark&utm_medium=referral&utm_campaign=hatenabookmark_to_hatenablog_pro&utm_content=hatenabookmark_footer" data-gtm-label="footerServices-blog-pro">はてなブログPro</a></li> <li class="footer-list-item"><a href="https://q.hatena.ne.jp/" data-gtm-label="footerServices-question">人力検索はてな</a></li> <li class="footer-list-item"><a href="http://d.hatena.ne.jp/" data-gtm-label="footerServices-keyword">はてなブログタグ</a></li> <li class="footer-list-item"><a href="http://hatenanews.com/" data-gtm-label="footerServices-hatenanews">はてなニュース</a></li> <li class="footer-list-item"><a href="https://soredoko.jp/" data-gtm-label="footerServices-soredoko">ソレドコ</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-app"> <ul> <li class="footer-list-item"><a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" target="_blank" rel="noopener" data-gtm-click-label="footer-app-ios"><img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/dl-button/appstore@2x.png" alt="App Storeからダウンロード"></a></li> <li class="footer-list-item"><a href="https://play.google.com/store/apps/details?id=com.hatena.android.bookmark&referrer=utm_source%3Dbookmark_sp%26utm_campaign%3Dbookmark_sp_user&hl=ja" target="_blank" rel="noopener" data-gtm-click-label="footer-app-android"><img src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/common/dl-button/googleplay@2x.png" alt="Google Playで手に入れよう"></a></li> </ul> </div> <div class="copyright">Copyright © 2005-2025 <a href="http://www.hatena.ne.jp/">Hatena</a>. All Rights Reserved.</div> </div> </div> <div id="touch-footer-ad"></div> <div id="touch-footer-ad-placeholder"></div> <div class="modal-overlay"></div> <script type="text/javascript" src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/js/v4/bookmark.star.js" async></script> <div class="js-head-notify is-hidden">設定を変更しました<span class="js-head-notify-close-button">x</span></div> </body> </html>