{"id":10559,"date":"2026-06-12T21:21:04","date_gmt":"2026-06-12T12:21:04","guid":{"rendered":"https:\/\/techmania.jp\/blog\/?p=10559"},"modified":"2026-07-17T21:06:25","modified_gmt":"2026-07-17T12:06:25","slug":"playwright","status":"publish","type":"post","link":"https:\/\/techmania.jp\/blog\/playwright\/","title":{"rendered":"Playwright\u3067Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b\uff5c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u52d5\u4f5c\u30c6\u30b9\u30c8\u306f\u5fc5\u9808\u4f5c\u696d\u306e\uff11\u3064\u3068\u306a\u308a\u307e\u3059\u3002<br>\u305d\u306e\u4e0a\u3067\u3001\u958b\u767a\u52b9\u7387\u3084\u54c1\u8cea\u306e\u5411\u4e0a\u3092\u56f3\u308b\u305f\u3081\u306b\u306f\u3001\u624b\u52d5\u30c6\u30b9\u30c8\u3060\u3051\u3067\u306a\u304f\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u5c0e\u5165\u304c\u6b20\u304b\u305b\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd1\u5e74\u3067\u306f\u3001<a href=\"https:\/\/techmania.jp\/blog\/javascript0003\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">React<\/a>\u3084<a href=\"https:\/\/techmania.jp\/blog\/javascript0008\/\" data-type=\"link\" data-id=\"https:\/\/techmania.jp\/blog\/javascript0008\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Next.js<\/a>\u306a\u3069\u306e\u666e\u53ca\u306b\u3088\u308a\u3001<a href=\"https:\/\/techmania.jp\/blog\/javascript0001\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">JavaScript<\/a>\u3092\u591a\u7528\u3057\u305f\u52d5\u7684\u306a\u753b\u9762\u3092\u6b63\u78ba\u306b\u30c6\u30b9\u30c8\u3067\u304d\u308b\u30c4\u30fc\u30eb\u304c\u6c42\u3081\u3089\u308c\u3066\u3044\u307e\u3059\u3002<br>\u305d\u306e\u4e2d\u306e\u4ee3\u8868\u7684\u306a\u3082\u306e\u306e\uff11\u3064\u306b\u3001<a href=\"https:\/\/playwright.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Playwright<\/a>\u3068\u3044\u3046\u30c4\u30fc\u30eb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u306f\u3001Playwright\u306e\u57fa\u672c\u7684\u306a\u7279\u5fb4\u3084\u30e1\u30ea\u30c3\u30c8\u30fb\u30c7\u30e1\u30ea\u30c3\u30c8\u3001Selenium\u3084Cypress\u3068\u306e\u6bd4\u8f03\u304b\u3089\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u3001Trace Viewer\u306a\u3069\u306e\u4e3b\u8981\u6a5f\u80fd\u3001Next.js\u3067\u306e\u5b9f\u8df5\u3001AI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u9023\u643a\uff08MCP\uff09\u307e\u3067\u5e45\u5e83\u304f\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__1\" class=\"wp-block-heading\">Playwright\u3068\u306f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306f\u3001Microsoft\u304c\u958b\u767a\u3057\u3066\u3044\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u81ea\u52d5\u5316\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<br>Chrome\u7cfb\u30d6\u30e9\u30a6\u30b6\u3060\u3051\u3067\u306a\u304fFirefox\u3084Safari\u7cfb\u30d6\u30e9\u30a6\u30b6\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u304a\u308a\u3001E2E\uff08End to End\uff09\u30c6\u30b9\u30c8\u3084Web\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\u306e\u81ea\u52d5\u64cd\u4f5c\u30c4\u30fc\u30eb\u306e\u4f5c\u6210\u306a\u3069\u3001\u5e45\u5e83\u3044\u7528\u9014\u3067\u5229\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br>\u3055\u3089\u306b\u30012025\u5e74\u4ee5\u964d\u306fAI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u5411\u3051\u306eMCP\uff08Model Context Protocol\uff09\u3068\u306e\u9023\u643a\u306b\u3082\u6ce8\u76ee\u304c\u96c6\u307e\u3063\u3066\u304a\u308a\u3001AI\u304c\u30d6\u30e9\u30a6\u30b6\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e\u57fa\u76e4\u6280\u8853\u3068\u3057\u3066\u3082\u6d3b\u7528\u3055\u308c\u59cb\u3081\u3066\u3044\u307e\u3059\u3002<br>\u306a\u304a\u3001Playwright\u306fGitHub\u4e0a\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u3067\u3042\u308a\u3001\u30e9\u30a4\u30bb\u30f3\u30b9\u8cbb\u7528\u3092\u304b\u3051\u305a\u306b\u5c0e\u5165\u3067\u304d\u308b\u70b9\u3082\u3001\u63a1\u7528\u306e\u30cf\u30fc\u30c9\u30eb\u3092\u4e0b\u3052\u3066\u3044\u308b\u7406\u7531\u306e1\u3064\u3067\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__1_1\" class=\"wp-block-heading\">Playwright\u3067\u3067\u304d\u308b\u3053\u3068<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306f\u3001\u4e0a\u8ff0\u3057\u305f3\u7a2e\u985e\u306e\u30d6\u30e9\u30a6\u30b6\u30a8\u30f3\u30b8\u30f3\u3092\u5358\u4e00API\u3067\u64cd\u4f5c\u3067\u304d\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002<br>\u30d6\u30e9\u30a6\u30b6\u306b\u5bfe\u3057\u3066\u4eba\u9593\u304c\u884c\u3046\u3088\u3046\u306a\u64cd\u4f5c\u3092\u3001\u30b3\u30fc\u30c9\u3067\u518d\u73fe\u3067\u304d\u308b\u305f\u3081\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b<\/li>\n\n\n\n<li>\u30d5\u30a9\u30fc\u30e0\u3078\u5165\u529b\u3059\u308b<\/li>\n\n\n\n<li>\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b<\/li>\n\n\n\n<li>\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u308b<\/li>\n\n\n\n<li>PDF\u3092\u751f\u6210\u3059\u308b<\/li>\n\n\n\n<li>\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3057\u305f\u57fa\u672c\u64cd\u4f5c\u306b\u52a0\u3048\u3066\u3001\u753b\u50cf\u3084\u66f8\u985e\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u30d5\u30a9\u30fc\u30e0\u306e\u691c\u8a3c\u3084\u3001API\u306e\u5fdc\u7b54\u3092\u30c6\u30b9\u30c8\u7528\u306b\u5dee\u3057\u66ff\u3048\u305f\u308a\u3001\u901a\u4fe1\u30a8\u30e9\u30fc\u3092\u308f\u3056\u3068\u767a\u751f\u3055\u305b\u305f\u308a\u3068\u3044\u3063\u305f\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u901a\u4fe1\u3092\u76e3\u8996\u30fb\u5236\u5fa1\u3059\u308b\u9ad8\u5ea6\u306a\u64cd\u4f5c\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u3053\u308c\u3089\u306e\u64cd\u4f5c\u306f\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u305f\u3081\u3001\u5b9f\u969b\u306e\u30e6\u30fc\u30b6\u30fc\u304cWeb\u30b5\u30a4\u30c8\u3092\u5229\u7528\u3059\u308b\u4e00\u9023\u306e\u6d41\u308c\uff08\u4f8b\u3048\u3070\u300c\u30ed\u30b0\u30a4\u30f3\u2192\u5546\u54c1\u3092\u30ab\u30fc\u30c8\u306b\u5165\u308c\u308b\u2192\u8cfc\u5165\u3059\u308b\u300d\u3068\u3044\u3063\u305f\u64cd\u4f5c\uff09\u3092\u3001\u305d\u306e\u307e\u307e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3068\u3057\u3066\u518d\u73fe\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3046\u3057\u3066\u66f8\u3044\u305f\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306f\u3001\u4eba\u304c\u6bce\u56de\u624b\u4f5c\u696d\u3067\u30af\u30ea\u30c3\u30af\u3084\u5165\u529b\u3092\u7e70\u308a\u8fd4\u3059\u3053\u3068\u306a\u304f\u3001\u4f55\u5ea6\u3067\u3082\u540c\u3058\u6761\u4ef6\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<br>\u305d\u306e\u305f\u3081\u3001\u30ea\u30ea\u30fc\u30b9\u524d\u306e\u52d5\u4f5c\u78ba\u8a8d\u3084\u3001\u6a5f\u80fd\u8ffd\u52a0\u306e\u305f\u3073\u306b\u767a\u751f\u3057\u304c\u3061\u306a\u300c\u610f\u56f3\u3057\u306a\u3044\u7b87\u6240\u304c\u58ca\u308c\u3066\u3044\u306a\u3044\u304b\u300d\u3092\u78ba\u8a8d\u3059\u308b\u30ea\u30b0\u30ec\u30c3\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8\u306b\u3082\u6d3b\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__1_2\" class=\"wp-block-heading\">Playwright\u306e\u7279\u5fb4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u81ea\u52d5\u30c6\u30b9\u30c8\u306b\u304a\u3044\u3066\u7279\u306b\u5384\u4ecb\u306a\u554f\u984c\u306e1\u3064\u304c\u3001Flaky Test\uff08\u4e0d\u5b89\u5b9a\u306a\u30c6\u30b9\u30c8\uff09\u3067\u3059\u3002<br>\u3053\u308c\u306f\u3001\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u8981\u7d20\u304c\u307e\u3060\u753b\u9762\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u306a\u3044\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u64cd\u4f5c\u3092\u884c\u304a\u3046\u3068\u3057\u3066\u3057\u307e\u3044\u3001\u5b9f\u884c\u3059\u308b\u305f\u3073\u306b\u6210\u529f\u3057\u305f\u308a\u5931\u6557\u3057\u305f\u308a\u3059\u308b\u73fe\u8c61\u3092\u6307\u3057\u307e\u3059\u3002<br>\u5f93\u6765\u306f\u3001\u3053\u306e\u554f\u984c\u3092\u907f\u3051\u308b\u305f\u3081\u306b<code>sleep(1000) <\/code>\u306e\u3088\u3046\u306a\u56fa\u5b9a\u306e\u5f85\u6a5f\u6642\u9593\u3092\u631f\u3080\u65b9\u6cd5\u304c\u3088\u304f\u4f7f\u308f\u308c\u3066\u304d\u307e\u3057\u305f\u304c\u3001\u74b0\u5883\u306b\u3088\u3063\u3066\u5f85\u3061\u6642\u9593\u304c\u9577\u3059\u304e\u305f\u308a\u77ed\u3059\u304e\u305f\u308a\u3059\u308b\u305f\u3081\u3001\u6839\u672c\u7684\u306a\u89e3\u6c7a\u306b\u306f\u306a\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001Playwright\u306b\u306f\u3001Auto-wait\uff08\u81ea\u52d5\u5f85\u6a5f\uff09\u3068\u547c\u3070\u308c\u308b\u4ed5\u7d44\u307f\u304c\u6a19\u6e96\u3067\u5099\u308f\u3063\u3066\u3044\u307e\u3059\u3002<br>\u8981\u7d20\u304c\u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306b\u306a\u308b\u3001\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u308b\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u5b8c\u4e86\u3059\u308b\u3068\u3044\u3063\u305f\u300c\u64cd\u4f5c\u53ef\u80fd\u306a\u72b6\u614b\u300d\u306b\u306a\u308b\u307e\u3067\u3092\u81ea\u52d5\u3067\u5224\u5b9a\u3057\u3066\u5f85\u3063\u3066\u304f\u308c\u308b\u305f\u3081\u3001\u958b\u767a\u8005\u304c\u5f85\u6a5f\u6642\u9593\u3092\u7d30\u304b\u304f\u8abf\u6574\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3055\u3089\u306b\u3001Playwright\u306f\u6a19\u6e96\u3067\u4e26\u5217\u5b9f\u884c\u6a5f\u80fd\u304c\u5099\u308f\u3063\u3066\u304a\u308a\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8907\u6570\u306e\u30ef\u30fc\u30ab\u30fc\u30d7\u30ed\u30bb\u30b9\u3067\u540c\u6642\u306b\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx playwright test --workers=4<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">test<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">--workers=4<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 id=\"outline__1_3\" class=\"wp-block-heading\">Playwright\u306e\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306b\u306f\u3001\u4e3b\u306b2\u3064\u306e\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2460\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5c0e\u5165\u3057\u3084\u3059\u3044<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript\u3084JavaScript\u3060\u3051\u3067\u306a\u304f\u3001Python\u30fbJava\u30fbC# \u306b\u3082\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u5c0e\u5165\u3057\u3084\u3059\u3044\u3067\u3059\u3002<br>\u3059\u3067\u306b\u958b\u767a\u74b0\u5883\u304cPython\u3084Java\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u3067\u3082\u3001\u65b0\u3057\u304f\u5225\u306e\u8a00\u8a9e\u3092\u5b66\u3073\u76f4\u3059\u5fc5\u8981\u304c\u306a\u304f\u3001\u4f7f\u3044\u6163\u308c\u305f\u8a00\u8a9e\u306e\u307e\u307e\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u3092\u59cb\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2461\u30c6\u30b9\u30c8\u304c\u5b89\u5b9a\u3057\u3001\u5b9f\u884c\u3082\u901f\u304f\u306a\u308b<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auto-wait\uff08\u81ea\u52d5\u5f85\u6a5f\uff09\u3084\u4e26\u5217\u5b9f\u884c\u3068\u3044\u3063\u305f\u4ed5\u7d44\u307f\u306f\u3001\u5b9f\u52d9\u4e0a\u306e\u30e1\u30ea\u30c3\u30c8\u306b\u3082\u306a\u308a\u307e\u3059\u3002<br>Flaky Test\u304c\u6e1b\u308b\u3053\u3068\u3067\u3001\u30c6\u30b9\u30c8\u306b\u5931\u6557\u3059\u308b\u305f\u3073\u306b\u300c\u30a2\u30d7\u30ea\u306e\u30d0\u30b0\u306a\u306e\u304b\u3001\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306e\u66f8\u304d\u65b9\u304c\u60aa\u3044\u306e\u304b\u300d\u3092\u8abf\u67fb\u3059\u308b\u624b\u9593\u304c\u6e1b\u308a\u3001\u672c\u6765\u306e\u4f5c\u696d\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002<br>\u3055\u3089\u306b\u3001\u4e26\u5217\u5b9f\u884c\u306b\u3088\u3063\u3066\u30c6\u30b9\u30c8\u5168\u4f53\u306e\u5b9f\u884c\u6642\u9593\u3082\u77ed\u7e2e\u3055\u308c\u308b\u305f\u3081\u3001CI\u74b0\u5883\u3067\u306e\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u30b5\u30a4\u30af\u30eb\u304c\u65e9\u307e\u308a\u3001\u30ea\u30ea\u30fc\u30b9\u307e\u3067\u306e\u30b9\u30d4\u30fc\u30c9\u3092\u843d\u3068\u3055\u305a\u306b\u54c1\u8cea\u3092\u62c5\u4fdd\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__1_4\" class=\"wp-block-heading\">Playwright\u306e\u30c7\u30e1\u30ea\u30c3\u30c8\u30fb\u6ce8\u610f\u70b9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u3092\u5c0e\u5165\u30fb\u904b\u7528\u3059\u308b\u969b\u306b\u306f\u3001\u77e5\u3063\u3066\u304a\u304f\u3079\u304d\u6ce8\u610f\u70b9\u304c2\u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2460\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b9\u30ad\u30eb\u304c\u5fc5\u8981\u306b\u306a\u308b<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306f\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u30c6\u30b9\u30c8\u3092\u7d44\u307f\u7acb\u3066\u308b\u30c4\u30fc\u30eb\u3067\u3042\u308b\u305f\u3081\u3001\u30ce\u30fc\u30b3\u30fc\u30c9\u578b\u306e\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30c4\u30fc\u30eb\u3068\u6bd4\u3079\u308b\u3068\u3001\u4e00\u5b9a\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30b9\u30ad\u30eb\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<br>JavaScript\u3084TypeScript\u3068\u3044\u3063\u305f\u8a00\u8a9e\u306b\u4e0d\u6163\u308c\u306a\u30e1\u30f3\u30d0\u30fc\u304c\u3044\u308b\u30c1\u30fc\u30e0\u3067\u306f\u3001\u6700\u521d\u306e\u5b66\u7fd2\u30b3\u30b9\u30c8\u304c\u304b\u304b\u308b\u70b9\u306f\u7406\u89e3\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u2461UI\u5909\u66f4\u306b\u4f34\u3046\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306e\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u304c\u5fc5\u8981\u306b\u306a\u308b<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u5bfe\u8c61\u306eWeb\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u306eUI\u304c\u5909\u66f4\u3055\u308c\u308b\u3068\u3001\u305d\u308c\u306b\u5408\u308f\u305b\u3066\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306e\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<br>\u7279\u306b\u3001CSS\u306e\u30af\u30e9\u30b9\u540d\u3084HTML\u69cb\u9020\u306b\u4f9d\u5b58\u3057\u305f\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u3001\u30c7\u30b6\u30a4\u30f3\u5909\u66f4\u306e\u305f\u3073\u306b\u30c6\u30b9\u30c8\u304c\u5931\u6557\u3057\u3001\u4fee\u6b63\u306e\u624b\u9593\u304c\u767a\u751f\u3057\u304c\u3061\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3068\u306f\u3044\u3048\u3001\u3053\u308c\u3089\u306f\u3001\u74b0\u5883\u8a2d\u5b9a\u3084\u30c6\u30b9\u30c8\u8a2d\u8a08\u306e\u5de5\u592b\u3001\u5f8c\u8ff0\u3059\u308bLocator\u3084Trace Viewer\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u5341\u5206\u306b\u30ab\u30d0\u30fc\u3067\u304d\u308b\u7bc4\u56f2\u306e\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7dcf\u5408\u7684\u306a\u4f7f\u3044\u3084\u3059\u3055\u3084\u5c06\u6765\u6027\u3092\u8003\u3048\u308b\u3068\u3001\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u30c4\u30fc\u30eb\u3068\u3057\u3066\u6709\u529b\u306a\u9078\u629e\u80a2\u3067\u3042\u308b\u3053\u3068\u306b\u5909\u308f\u308a\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<h2 id=\"outline__2\" class=\"wp-block-heading\">Playwright\u3068\u4ed6\u30c4\u30fc\u30eb\uff08Cypress\/Selenium\uff09\u306e\u9055\u3044\u3068\u9078\u5b9a\u57fa\u6e96<\/h2>\n\n\n\n<h3 id=\"outline__2_1\" class=\"wp-block-heading\">Playwright\u3068Selenium\u30fbCypress\u306e\u6bd4\u8f03<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee3\u8868\u7684\u306a\u81ea\u52d5\u5316\u30c4\u30fc\u30eb\u306e\u4e2d\u306b\u3001\u540c\u3058\u304f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3067\u3042\u308b Selenium \u3068 Cypress\u304c\u3042\u308a\u307e\u3059\u3002<br>\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3068Playwright\u3068\u306e\u9055\u3044\u306b\u3064\u3044\u3066\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"pw-compare-table\">\n<style>\n  .pw-compare-table {\n    font-family: \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", sans-serif;\n    color: #222;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  .pw-compare-table table {\n    border-collapse: collapse;\n    width: 100%;\n    min-width: 560px;\n    font-size: 15px;\n  }\n  .pw-compare-table th,\n  .pw-compare-table td {\n    text-align: left;\n    padding: 14px 16px;\n    vertical-align: top;\n    border-bottom: 1px solid #e0e0e0;\n    white-space: normal;\n  }\n  .pw-compare-table thead th {\n    font-weight: 700;\n    border-bottom: 2px solid #333;\n  }\n  .pw-compare-table th:first-child,\n  .pw-compare-table td:first-child {\n    color: #333;\n    font-weight: 500;\n    white-space: nowrap;\n  }\n  .pw-compare-table code {\n    background: #f1f1f1;\n    color: #c0392b;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: Consolas, Monaco, monospace;\n    font-size: 13px;\n  }\n  @media (max-width: 600px) {\n    .pw-compare-table table {\n      font-size: 13px;\n    }\n    .pw-compare-table th,\n    .pw-compare-table td {\n      padding: 10px 12px;\n    }\n  }\n<\/style>\n\n<table>\n  <thead>\n    <tr>\n      <th>\u9805\u76ee<\/th>\n      <th>Playwright<\/th>\n      <th>Selenium<\/th>\n      <th>Cypress<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>\u901a\u4fe1\u65b9\u5f0f<\/td>\n      <td>\u30d6\u30e9\u30a6\u30b6\u3068\u76f4\u63a5\u901a\u4fe1<\/td>\n      <td>WebDriver\u7d4c\u7531<\/td>\n      <td>\u30d6\u30e9\u30a6\u30b6\u5185\u3067JS\u5b9f\u884c<\/td>\n    <\/tr>\n    <tr>\n      <td>\u5b9f\u884c\u901f\u5ea6<\/td>\n      <td>\u901f\u3044<\/td>\n      <td>\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u3042\u308a\u6bd4\u8f03\u7684\u9045\u3044<\/td>\n      <td>\u901f\u3044<\/td>\n    <\/tr>\n    <tr>\n      <td>\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6<\/td>\n      <td>Chromium\u30fbFirefox\u30fbWebKit<\/td>\n      <td>\u4e3b\u8981\u30d6\u30e9\u30a6\u30b6\u5168\u822c<\/td>\n      <td>\u4e3b\u306bChromium\u30d9\u30fc\u30b9<\/td>\n    <\/tr>\n    <tr>\n      <td>\u8907\u6570\u30bf\u30d6\u30fb\u8907\u6570\u30d6\u30e9\u30a6\u30b6<\/td>\n      <td>\u5f97\u610f<\/td>\n      <td>\u5bfe\u5fdc\u53ef\u80fd<\/td>\n      <td>\u5236\u7d04\u3042\u308a<\/td>\n    <\/tr>\n    <tr>\n      <td>\u5bfe\u5fdc\u8a00\u8a9e<\/td>\n      <td>TypeScript\u30fbJavaScript\u30fbPython\u30fbJava\u30fbC#<\/td>\n      <td>\u591a\u8a00\u8a9e\u5bfe\u5fdc<\/td>\n      <td>JavaScript\u30fbTypeScript\u304c\u4e2d\u5fc3<\/td>\n    <\/tr>\n    <tr>\n      <td>\u6a19\u6e96\u306e\u4e26\u5217\u5b9f\u884c<\/td>\n      <td>\u3042\u308a\uff08<code>--workers<\/code>\u30aa\u30d7\u30b7\u30e7\u30f3\uff09<\/td>\n      <td>\u5225\u9014\u8a2d\u5b9a\u304c\u5fc5\u8981<\/td>\n      <td>\u6709\u511f\u30d7\u30e9\u30f3\u3067\u5f37\u5316<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3053\u304b\u3089\u306f\u3001\u7279\u306b\u5b9f\u884c\u901f\u5ea6\u306b\u5f71\u97ff\u3059\u308b\u300c\u901a\u4fe1\u65b9\u5f0f\u306e\u9055\u3044\u300d\u306b\u3064\u3044\u3066\u3001\u305d\u308c\u305e\u308c\u306e\u4ed5\u7d44\u307f\u3092 \u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u3010Selenium\u3011<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selenium\u306f\u3001WebDriver\u3068\u3044\u3046\u6a19\u6e96\u30d7\u30ed\u30c8\u30b3\u30eb\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002<br>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8907\u6570\u306e\u901a\u4fe1\u3092\u7d4c\u7531\u3059\u308b\u305f\u3081\u3001\u6bd4\u8f03\u7684\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u304c\u5927\u304d\u3044\u70b9\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9<br>\u2193<br>WebDriver<br>\u2193<br>\u30d6\u30e9\u30a6\u30b6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65b9Playwright\u306f\u3001\u4ee5\u4e0b\u306e\u69cb\u6210\u3067\u76f4\u63a5\u901a\u4fe1\u3059\u308b\u305f\u3081\u3001\u9ad8\u901f\u306b\u52d5\u4f5c\u3059\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9<br>\u2193<br>\u30d6\u30e9\u30a6\u30b6\u30d7\u30ed\u30c8\u30b3\u30eb<br>\u2193<br>\u30d6\u30e9\u30a6\u30b6<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001Playwright Test\u306b\u306f\u6a19\u6e96\u3067\u4e26\u5217\u5b9f\u884c\u6a5f\u80fd\u304c\u3042\u308b\u305f\u3081\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8907\u6570\u306e\u30ef\u30fc\u30ab\u30fc\u30d7\u30ed\u30bb\u30b9\u3067\u540c\u6642\u5b9f\u884c\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx playwright test --workers=4<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">test<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">--workers=4<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u3010Cypress\u3011<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cypress\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u5185\u90e8\u3067JavaScript\u3092\u5b9f\u884c\u3059\u308b\u65b9\u5f0f\u3092\u63a1\u7528\u3057\u3066\u3044\u307e\u3059\u3002<br>\u30c7\u30d0\u30c3\u30b0\u6027\u306b\u512a\u308c\u308b\u4e00\u65b9\u3001\u8907\u6570\u30bf\u30d6\u3084\u8907\u6570\u30d6\u30e9\u30a6\u30b6\u306e\u6271\u3044\u306b\u306f\u5236\u7d04\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65b9\u3001Playwright\u306f\u8907\u6570\u30da\u30fc\u30b8\u3084\u8907\u6570\u30d6\u30e9\u30a6\u30b6\u3082\u81ea\u7136\u306b\u6271\u3046\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__2_2\" class=\"wp-block-heading\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8a00\u8a9e\u30b9\u30bf\u30c3\u30af\u3084\u76ee\u7684\u306b\u5fdc\u3058\u305f\u30c4\u30fc\u30eb\u306e\u9078\u3073\u65b9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u74b0\u5883\u3084\u76ee\u7684\u306b\u5fdc\u3058\u305f\u304a\u3059\u3059\u3081\u30c4\u30fc\u30eb\u306e\u4e00\u4f8b\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65e2\u5b58\u306eJava\u8cc7\u7523\u3092\u6d3b\u304b\u3057\u305f\u3044 \u2026 Selenium<\/li>\n\n\n\n<li>React\u4e2d\u5fc3\u306b\u958b\u767a \u2026 Cypress<\/li>\n\n\n\n<li>Next.js\u3092\u4f7f\u7528 \u2026 Playwright<\/li>\n\n\n\n<li>Python\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0 \u2026 Playwright<\/li>\n\n\n\n<li>AI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u9023\u643a \u2026 Playwright<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u9078\u5b9a\u57fa\u6e96\u306b\u5171\u901a\u3057\u3066\u3044\u308b\u306e\u306f\u3001\u65e2\u5b58\u306e\u8cc7\u7523\u3084\u5f97\u610f\u5206\u91ce\u3092\u6d3b\u304b\u305b\u308b\u304b\u3069\u3046\u304b\u3068\u3044\u3046\u8996\u70b9\u3067\u3059\u3002<br>\u7279\u306bPlaywright\u306f\u5bfe\u5fdc\u8a00\u8a9e\u306e\u5e45\u5e83\u3055\u3068AI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u9023\u643a\u3068\u3044\u3046\u65b0\u3057\u3044\u5f37\u307f\u3092\u6301\u3064\u305f\u3081\u3001\u6280\u8853\u30b9\u30bf\u30c3\u30af\u3092\u554f\u308f\u305a\u9078\u3070\u308c\u3084\u3059\u3044\u30c4\u30fc\u30eb\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br>\u73fe\u5728\u3067\u306f\u3001\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u59cb\u3081\u308b\u5834\u5408\u306bPlaywright\u3092\u7b2c\u4e00\u5019\u88dc\u306b\u3059\u308b\u30b1\u30fc\u30b9\u304c\u5897\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__3\" class=\"wp-block-heading\">Playwright\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u521d\u671f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u524d\u306b\u3001\u4ee5\u4e0b\u306e\u74b0\u5883\u3092\u6e96\u5099\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js\uff08\u30d0\u30fc\u30b8\u30e7\u30f318\u4ee5\u4e0a\u3001\u6700\u65b0\u306eLTS\u7248\u3092\u63a8\u5968\uff09<\/li>\n\n\n\n<li>\u5bfe\u5fdcOS\uff1aWindows\u3001macOS\u3001Linux<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30c7\u30a3\u30b9\u30af\u5bb9\u91cf\uff1a\u30d6\u30e9\u30a6\u30b6\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u542b\u3081\u3066\u7d04500MB\u301c1GB\u7a0b\u5ea6<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Node.js\u304c\u3059\u3067\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u304b\u306f\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>node -v<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">node<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">-v<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\uff08\u4f8b\uff1av20.11.0\uff09\u304c\u8868\u793a\u3055\u308c\u308c\u3070\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e08\u307f\u3067\u3059\u3002<br>\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u306f\u3001Node.js\u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u4e8b\u524d\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 id=\"outline__3_1\" class=\"wp-block-heading\">Playwright\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Node.js\u74b0\u5883\u306e\u5834\u5408\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066<a href=\"https:\/\/playwright.dev\/docs\/intro\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npm init playwright@latest<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npm<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">init<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright@latest<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30de\u30f3\u30c9\u5b9f\u884c\u5f8c\u3001\u5bfe\u8a71\u5f62\u5f0f\u3067\u4ee5\u4e0b\u306e\u9805\u76ee\u3092\u8cea\u554f\u3055\u308c\u308b\u306e\u3067\u3001\u4efb\u610f\u306e\u5185\u5bb9\u3067\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br>\u8ff7\u3063\u305f\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u56de\u7b54\u3092\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30fbTypeScript \u304bJavaScript\u306e\u9078\u629e<br>\u3000\u2192\u8ff7\u3063\u305f\u3089TypeScript\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<br>\u3000\u3000\u578b\u306e\u30b5\u30dd\u30fc\u30c8\u306b\u3088\u308a\u3001\u30b3\u30fc\u30c9\u88dc\u5b8c\u3084\u30a8\u30e9\u30fc\u306e\u65e9\u671f\u767a\u898b\u304c\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30fb\u30c6\u30b9\u30c8\u30d5\u30a9\u30eb\u30c0\u540d<br>\u3000\u2192\u7279\u306b\u3053\u3060\u308f\u308a\u304c\u306a\u3051\u308c\u3070\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306etests\u306e\u307e\u307e\u3067\u554f\u984c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30fbGitHub Actions workflow\u306e\u8ffd\u52a0\u306e\u6709\u7121<br>\u3000\u2192CI\u74b0\u5883\u3067\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5b9f\u884c\u3057\u305f\u3044\u5834\u5408\u306fYes\u3092\u9078\u629e\u3057\u307e\u3059\u3002<br>\u3000\u3000\u307e\u305a\u306f\u30ed\u30fc\u30ab\u30eb\u3067\u8a66\u3057\u305f\u3044\u3060\u3051\u306e\u5834\u5408\u306fNo\u3067\u3082\u69cb\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30fb\u30d6\u30e9\u30a6\u30b6\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306e\u6709\u7121<br>\u3000\u2192Yes\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u3053\u306e\u5f8c\u306b\u7d39\u4ecb\u3059\u308b<em>npx playwright install<\/em>\u3092\u5225\u9014\u5b9f\u884c\u3059\u308b\u624b\u9593\u304c\u7701\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># \u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install -D @playwright\/test\n\n# \u30d6\u30e9\u30a6\u30b6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpx playwright install<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #546E7A; font-style: italic\"># \u65e2\u5b58\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FFCB6B\">npm<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">install<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">-D<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">@playwright\/test<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #546E7A; font-style: italic\"># \u30d6\u30e9\u30a6\u30b6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">install<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/techmania.jp\/blog\/python-class\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Python<\/a>\u306e\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Python<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># playwright\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\npip install playwright\n\n# \u30d6\u30e9\u30a6\u30b6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nplaywright install<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #546E7A; font-style: italic\"># playwright\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">pip install playwright<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #546E7A; font-style: italic\"># \u30d6\u30e9\u30a6\u30b6\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">playwright install<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 id=\"outline__3_2\" class=\"wp-block-heading\">codegen\u3067\u64cd\u4f5c\u3092\u81ea\u52d5\u3067\u30b3\u30fc\u30c9\u5316\u3059\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306e\u4fbf\u5229\u6a5f\u80fd\u306e\uff11\u3064\u306b\u3001codegen\u304c\u3042\u308a\u307e\u3059\u3002<br>codegen\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u884c\u308f\u308c\u305f\u64cd\u4f5c\u3092\u81ea\u52d5\u3067\u8a18\u9332\u3057\u3001\u305d\u308c\u3092\u5143\u306b\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u308b\u6a5f\u80fd\u306e\u3053\u3068\u3092\u8a00\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3001codegen\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx playwright codegen &lt;URL><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">codegen<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #C3E88D\">UR<\/span><span style=\"color: #EEFFFF\">L<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a18\u9332\u6642\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30d6\u30e9\u30a6\u30b6\u64cd\u4f5c\u3092\u81ea\u52d5\u3067\u8a18\u9332\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30af\u30ea\u30c3\u30af<\/li>\n\n\n\n<li>\u30dc\u30bf\u30f3\u62bc\u4e0b<\/li>\n\n\n\n<li>\u30c6\u30ad\u30b9\u30c8\u5165\u529b<\/li>\n\n\n\n<li>\u30da\u30fc\u30b8\u9077\u79fb<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306f\u3001\u5b9f\u969b\u306b\u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9\u306e\u4e00\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>await page.goto(\"https:\/\/example.com\");\n\nawait page.get_by_label(\"\u79fb\u52d5\").click();\n\nawait page.get_by_label(\"\u691c\u7d22\").fill(\"playwright\");<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #EEFFFF\"> page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">goto<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/example.com<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #EEFFFF\"> page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">get_by_label<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u79fb\u52d5<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">click<\/span><span style=\"color: #EEFFFF\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #EEFFFF\"> page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">get_by_label<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u691c\u7d22<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">fill<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u5909\u63db\u53ef\u80fd\u306a\u8a00\u8a9e\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TypeScript<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Python<\/li>\n\n\n\n<li>Java<\/li>\n\n\n\n<li>C#<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u306e\u96db\u5f62\u4f5c\u6210\u3084\u3001\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\u958b\u767a\u306e\u52b9\u7387\u5316\u306a\u3069\u306b\u5f79\u7acb\u3064\u4fbf\u5229\u306a\u6a5f\u80fd\u3067\u3059\u3002<br>\u7279\u306b\u3001\u521d\u3081\u3066\u89e6\u308bWeb\u30b5\u30a4\u30c8\u306e\u64cd\u4f5c\u3092\u30b3\u30fc\u30c9\u5316\u3057\u305f\u3044\u3068\u304d\u3084\u3001\u8907\u96d1\u306a\u30d5\u30a9\u30fc\u30e0\u5165\u529b\u306e\u624b\u9806\u3092 \u7d20\u65e9\u304f\u30b3\u30fc\u30c9\u306b\u843d\u3068\u3057\u305f\u3044\u3068\u304d\u306b\u91cd\u5b9d\u3057\u307e\u3059\u3002<br>\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u305d\u306e\u307e\u307e\u4f7f\u3046\u3060\u3051\u3067\u306a\u304f\u3001 \u5b9f\u969b\u306e\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306b\u7d44\u307f\u8fbc\u3080\u969b\u306e\u4e0b\u66f8\u304d\u3068\u3057\u3066\u6d3b\u7528\u3057\u3001\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\uff08expect\uff09\u3092 \u8ffd\u52a0\u3057\u3066\u3044\u304f\u4f7f\u3044\u65b9\u304c\u5b9f\u52d9\u3067\u306f\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__4\" class=\"wp-block-heading\">Playwright\u306e\u4e3b\u8981\u6a5f\u80fd<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306b\u306f\u3001\u30c6\u30b9\u30c8\u306e\u5b89\u5b9a\u6027\u3084\u901f\u5ea6\u3060\u3051\u3067\u306a\u304f\u3001\u958b\u767a\u30fb\u904b\u7528\u3092\u52a9\u3051\u308b\u305f\u3081\u306e\u4fbf\u5229\u306a\u6a5f\u80fd\u3082\u6570\u591a\u304f\u5099\u308f\u3063\u3066\u3044\u307e\u3059\u3002<br>\u3053\u3053\u3067\u306f\u3001\u305d\u306e\u4e2d\u3067\u3082\u7279\u306b\u5b9f\u52d9\u3067\u3088\u304f\u4f7f\u308f\u308c\u308b\u300cTrace Viewer\u300d\u3068\u300c\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u306e\u30a8\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u300d\u3068\u3044\u30462\u3064\u306e\u6a5f\u80fd\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__4_1\" class=\"wp-block-heading\">Trace Viewer\u306b\u3088\u308b\u5931\u6557\u89e3\u6790<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u3092\u904b\u7528\u3057\u3066\u3044\u308b\u3068\u3001\u300c\u30ed\u30fc\u30ab\u30eb\u3067\u306f\u6210\u529f\u3059\u308b\u306e\u306b\u3001CI\u74b0\u5883\u3060\u3051\u5931\u6557\u3059\u308b\u300d\u300c\u5b9f\u884c\u3059\u308b\u305f\u3073\u306b\u7d50\u679c\u304c\u5909\u308f\u308b\u300d\u3068\u3044\u3063\u305f\u3001\u539f\u56e0\u306e\u7279\u5b9a\u304c\u96e3\u3057\u3044\u5931\u6557\u306b\u906d\u9047\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<br>\u3053\u3046\u3057\u305f\u5834\u5408\u306e\u8abf\u67fb\u306b\u5f79\u7acb\u3064\u306e\u304c\u3001Trace Viewer\u3068\u3044\u3046\u6a5f\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trace Viewer\u3092\u4f7f\u3046\u306b\u306f\u3001\u307e\u305a\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\uff08playwright.config.ts\uff09\u3067\u30c8\u30ec\u30fc\u30b9\u306e\u8a18\u9332\u65b9\u6cd5\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">TypeScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ playwright.config.ts\nexport default defineConfig({\n  use: {\n    trace: 'on-first-retry',\n  },\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #546E7A; font-style: italic\">\/\/ playwright.config.ts<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #82AAFF\">defineConfig<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  <\/span><span style=\"color: #F07178\">use<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #F07178\">trace<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">on-first-retry<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>on-first-retry<\/code>\u3068\u6307\u5b9a\u3059\u308b\u3068\u3001\u30c6\u30b9\u30c8\u304c1\u56de\u76ee\u306b\u5931\u6557\u3057\u3001\u30ea\u30c8\u30e9\u30a4\u3055\u308c\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u306e\u307f\u30c8\u30ec\u30fc\u30b9\u304c\u8a18\u9332\u3055\u308c\u307e\u3059\u3002<br>\u5e38\u306b\u8a18\u9332\u3057\u305f\u3044\u5834\u5408\u306f<code>on<\/code>\u3001\u5931\u6557\u3057\u305f\u3068\u304d\u3060\u3051\u8a18\u9332\u3057\u305f\u3044\u5834\u5408\u306f<code>retain-on-failure<\/code>\u306a\u3069\u3001\u7528\u9014\u306b\u5fdc\u3058\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a18\u9332\u3055\u308c\u305f\u30c8\u30ec\u30fc\u30b9\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx playwright show-trace trace.zip<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">show-trace<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">trace.zip<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Trace Viewer\u3092\u958b\u304f\u3068\u3001\u30c6\u30b9\u30c8\u5b9f\u884c\u4e2d\u306e\u5404\u30b9\u30c6\u30c3\u30d7\u304c\u6642\u7cfb\u5217\u3067\u8868\u793a\u3055\u308c\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u60c5\u5831\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5404\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u305f\u77ac\u9593\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/li>\n\n\n\n<li>\u64cd\u4f5c\u524d\u5f8c\u306eDOM\u306e\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\uff08\u5b9f\u969b\u306e\u753b\u9762\u69cb\u9020\uff09<\/li>\n\n\n\n<li>\u767a\u751f\u3057\u305f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ea\u30af\u30a8\u30b9\u30c8\u3068\u305d\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u5185\u5bb9<\/li>\n\n\n\n<li>\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u51fa\u529b\u3055\u308c\u305f\u30ed\u30b0\u3084\u30a8\u30e9\u30fc<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u60c5\u5831\u3092\u3001\u30c6\u30b9\u30c8\u3092\u518d\u5b9f\u884c\u3059\u308b\u3053\u3068\u306a\u304f\u5f8c\u304b\u3089\u78ba\u8a8d\u3067\u304d\u308b\u305f\u3081\u3001CI\u74b0\u5883\u3067\u767a\u751f\u3057\u305f\u518d\u73fe\u3057\u306b\u304f\u3044\u4e0d\u5177\u5408\u306e\u539f\u56e0\u8abf\u67fb\u306b\u7279\u306b\u52b9\u679c\u7684\u3067\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__4_2\" class=\"wp-block-heading\">\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u306e\u30a8\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Web\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u306e\u591a\u304f\u306f\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u304b\u3089\u306e\u30a2\u30af\u30bb\u30b9\u3092\u524d\u63d0\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u305d\u306e\u305f\u3081\u3001PC\u5411\u3051\u306e\u753b\u9762\u3060\u3051\u3067\u306a\u304f\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3084\u30bf\u30d6\u30ec\u30c3\u30c8\u3067\u306e\u8868\u793a\u30fb\u64cd\u4f5c\u3082\u78ba\u8a8d\u3057\u305f\u3044\u5834\u9762\u304c\u591a\u304f\u3042\u308a\u307e\u3059\u3002<br>Playwright\u306b\u306f\u3001\u5b9f\u6a5f\u3092\u7528\u610f\u3057\u306a\u304f\u3066\u3082\u3001\u4e3b\u8981\u306a\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u306e\u753b\u9762\u30b5\u30a4\u30ba\u3084\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u518d\u73fe\u3067\u304d\u308b\u300c\u30c7\u30d0\u30a4\u30b9\u30a8\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u300d\u3068\u3044\u3046\u6a5f\u80fd\u304c\u5099\u308f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5229\u7528\u3059\u308b\u306b\u306f\u3001\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\uff08playwright.config.ts\uff09\u3067\u3001\u3042\u3089\u304b\u3058\u3081\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30c7\u30d0\u30a4\u30b9\u306e\u30d7\u30ea\u30bb\u30c3\u30c8\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">TypeScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ playwright.config.ts\nimport { defineConfig, devices } from '@playwright\/test';\n\nexport default defineConfig({\n  projects: [\n    {\n      name: 'iPhone',\n      use: { ...devices&#91;'iPhone 14'&#93; },\n    },\n    {\n      name: 'Pixel',\n      use: { ...devices&#91;'Pixel 7'&#93; },\n    },\n  ],\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #546E7A; font-style: italic\">\/\/ playwright.config.ts<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #EEFFFF\">defineConfig<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #EEFFFF\">devices<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">@playwright\/test<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">export<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">default<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #82AAFF\">defineConfig<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  <\/span><span style=\"color: #F07178\">projects<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">iPhone<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #F07178\">use<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #EEFFFF\">devices&#91;<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">iPhone 14<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #EEFFFF\">&#93; <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Pixel<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #F07178\">use<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">...<\/span><span style=\"color: #EEFFFF\">devices&#91;<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Pixel 7<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #EEFFFF\">&#93; <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  ]<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>devices<\/code>\u306b\u306f\u3001iPhone\u3084Pixel\u3001iPad\u306a\u3069\u3001\u5b9f\u5728\u3059\u308b\u4e3b\u8981\u306a\u7aef\u672b\u306e\u753b\u9762\u30b5\u30a4\u30ba\u30fb\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30fb\u30bf\u30c3\u30c1\u64cd\u4f5c\u5bfe\u5fdc\u306e\u6709\u7121\u3068\u3044\u3063\u305f\u60c5\u5831\u304c\u3042\u3089\u304b\u3058\u3081\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br>\u4e0a\u8a18\u306e\u3088\u3046\u306b projects\uff08\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\uff09\u3068\u3057\u3066\u30c7\u30d0\u30a4\u30b9\u3092\u8907\u6570\u6307\u5b9a\u3057\u3066\u304a\u304f\u3068\u3001\u540c\u3058\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u3001\u6307\u5b9a\u3057\u305f\u3059\u3079\u3066\u306e\u30c7\u30d0\u30a4\u30b9\u306b\u5bfe\u3057\u3066\u81ea\u52d5\u7684\u306b\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u3042\u3089\u304b\u3058\u3081\u7528\u610f\u3055\u308c\u305f\u30c7\u30d0\u30a4\u30b9\u4ee5\u5916\u306b\u3082\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\uff08\u753b\u9762\u30b5\u30a4\u30ba\uff09\u3084\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u500b\u5225\u306b\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3068\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u300c\u81ea\u5206\u304c\u3069\u306e\u7aef\u672b\u30fb\u30d6\u30e9\u30a6\u30b6\u3067\u3042\u308b\u304b\u300d\u3092Web\u30b5\u30a4\u30c8\u5074\u306b\u4f1d\u3048\u308b\u6587\u5b57\u5217\u306e\u3053\u3068\u3067\u3059\u3002<br>\u4e0b\u8a18\u306e\u4f8b\u3067\u306fiPhone\u306eSafari\u3092\u6a21\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">TypeScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>use: {\n  viewport: { width: 390, height: 844 },\n  userAgent: 'Mozilla\/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/17.0 Mobile\/15E148 Safari\/604.1',\n},<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">use<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">viewport<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #FFCB6B\">width<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">390<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #FFCB6B\">height<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">844<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #FFCB6B\">userAgent<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Mozilla\/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/17.0 Mobile\/15E148 Safari\/604.1<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">},<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u306b\u3088\u308a\u3001\u5b9f\u969b\u306e\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7aef\u672b\u3092\u7528\u610f\u3057\u306a\u304f\u3066\u3082\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u5d29\u308c\u3084\u3001\u30e2\u30d0\u30a4\u30eb\u7279\u6709\u306e\u30bf\u30c3\u30d7\u64cd\u4f5c\u306e\u4e0d\u5177\u5408\u306a\u3069\u3092\u3001\u958b\u767a\u4e2d\u306ePC\u4e0a\u3067\u52b9\u7387\u7684\u306b\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7279\u306b\u3001PC\u7248\u3068\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u5927\u304d\u304f\u7570\u306a\u308b\u30b5\u30a4\u30c8\u3092\u958b\u767a\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u3053\u306e\u6a5f\u80fd\u3092\u4f7f\u3063\u3066\u4e21\u65b9\u306e\u898b\u3048\u65b9\u30921\u3064\u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3067\u30ab\u30d0\u30fc\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__5\" class=\"wp-block-heading\">Playwright\u3092\u7528\u3044\u305fNext.js\u306eE2E\u30c6\u30b9\u30c8\u3068Python\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0<\/h2>\n\n\n\n<h3 id=\"outline__5_1\" class=\"wp-block-heading\">Next.js\u3067UI\u30c6\u30b9\u30c8\u3092\u66f8\u3044\u3066\u307f\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">playwright\u3067\u306f\u3001\u4e0b\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067 UI Mode \u3092\u7acb\u3061\u4e0a\u3052\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Bash<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx playwright test --ui<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">npx<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">playwright<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">test<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C3E88D\">--ui<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">UI Mode\u304c\u8d77\u52d5\u3059\u308b\u3068\u3001Playwright\u306e\u5168\u3066\u306e\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u30ea\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u3001\u4e0b\u8a18\u306e\u5358\u4f4d\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb<\/li>\n\n\n\n<li>\u5358\u4e00\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u30b0\u30eb\u30fc\u30d7<\/li>\n\n\n\n<li>\u5358\u4e00\u30c6\u30b9\u30c8<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u30c6\u30b9\u30c8\u306f\u3001\u4ee5\u4e0b\u306e\u69cb\u6587\u3067\u5b9a\u7fa9\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>test(\"\u5185\u5bb9\u8aac\u660e\", async ({ page }) => {...})<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #82AAFF\">test<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u5185\u5bb9\u8aac\u660e<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #EEFFFF; font-style: italic\">page<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{...}<\/span><span style=\"color: #EEFFFF\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>test(\"\u30ed\u30b0\u30a4\u30f3\", async ({ page }) => {\n  await page.goto(\"https:\/\/example.com\");\n\n  await page.getByRole(\"button\", {\n    name: \"Login\",\n  }).click();\n\n  await expect(page).toHaveURL(\"\/login\");\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #82AAFF\">test<\/span><span style=\"color: #EEFFFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\u30ed\u30b0\u30a4\u30f3<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">({<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #EEFFFF; font-style: italic\">page<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">})<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #EEFFFF\">page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">goto<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/example.com<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #EEFFFF\">page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getByRole<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">button<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Login<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">click<\/span><span style=\"color: #F07178\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">await<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">expect<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #EEFFFF\">page<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">toHaveURL<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">\/login<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #EEFFFF\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u3067\u306f\u3001Locator\u3068\u547c\u3070\u308c\u308b\u8981\u7d20\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br>CSS\u30bb\u30ec\u30af\u30bf\u306e\u3088\u3046\u306bHTML\u306e\u69cb\u9020\u3084\u30af\u30e9\u30b9\u540d\u3092\u76f4\u63a5\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u3060\u3068\u3001\u30c7\u30b6\u30a4\u30f3\u3084\u30de\u30fc\u30af\u30a2\u30c3\u30d7 \u304c\u5909\u308f\u308b\u305f\u3073\u306b\u30c6\u30b9\u30c8\u304c\u58ca\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002<br>Playwright\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u753b\u9762\u3092\u898b\u308b\u3068\u304d\u3068 \u540c\u3058\u8996\u70b9\u3067\u8981\u7d20\u3092\u63a2\u305b\u308b\u300cLocator\u300d\u3068\u3044\u3046\u4ed5\u7d44\u307f\u304c\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u53d6\u5f97\u65b9\u6cd5 \u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>getByRole() <\/code>\u2026 \u30ed\u30fc\u30eb\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByText()<\/code> \u2026 \u30c6\u30ad\u30b9\u30c8\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByLabel()<\/code> \u2026 \u30e9\u30d9\u30eb\u30c6\u30ad\u30b9\u30c8\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByPlaceholder()<\/code> \u2026 \u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByAltText()<\/code> \u2026 \u4ee3\u66ff\u30c6\u30ad\u30b9\u30c8\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByTitle()<\/code> \u2026 \u30bf\u30a4\u30c8\u30eb\u5c5e\u6027\u306b\u3088\u308b\u691c\u7d22<\/li>\n\n\n\n<li><code>getByTestId()<\/code> \u2026 \u30c6\u30b9\u30c8ID\u306b\u3088\u308b\u691c\u7d22<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u4e2d\u3067\u3082\u7279\u306b<code>getByRole()<\/code>\u306f\u3001\u30dc\u30bf\u30f3\u3084\u30ea\u30f3\u30af\u3068\u3044\u3063\u305f\u8981\u7d20\u306e\u5f79\u5272\u3067\u63a2\u3059\u305f\u3081\u3001Playwright\u516c\u5f0f\u3067\u3082\u63a8\u5968\u3055\u308c\u3066\u3044\u308b\u6700\u3082\u5b89\u5b9a\u3057\u305f\u53d6\u5f97\u65b9\u6cd5\u3067\u3059\u3002<br>\u8ff7\u3063\u305f\u3068\u304d\u306f\u3001\u307e\u305a<code>getByRole()<\/code>\u3067 \u63a2\u305b\u306a\u3044\u304b\u3092\u691c\u8a0e\u3057\u3001\u96e3\u3057\u3044\u5834\u5408\u306b\u4ed6\u306e\u65b9\u6cd5\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h3 id=\"outline__5_2\" class=\"wp-block-heading\">Python\u3067\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\u3092\u5b9f\u8df5\u3059\u308b<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306f\u3001<a href=\"https:\/\/techmania.jp\/blog\/python-pandas\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Python<\/a>\u3067\u8a18\u8ff0\u3059\u308b\u5834\u5408\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">Python<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>from playwright.sync_api import sync_playwright\n\nwith sync_playwright() as p:\n\n    browser = p.chromium.launch()\n\n    page = browser.new_page()\n\n    page.goto(\"https:\/\/example.com\")\n\n    print(page.title())\n\n    browser.close()<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">from<\/span><span style=\"color: #EEFFFF\"> playwright<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #EEFFFF\">sync_api <\/span><span style=\"color: #89DDFF; font-style: italic\">import<\/span><span style=\"color: #EEFFFF\"> sync_playwright<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">with<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #82AAFF\">sync_playwright<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">as<\/span><span style=\"color: #EEFFFF\"> p<\/span><span style=\"color: #89DDFF\">:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    browser <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #EEFFFF\"> p<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #F07178\">chromium<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">launch<\/span><span style=\"color: #89DDFF\">()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    page <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #EEFFFF\"> browser<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">new_page<\/span><span style=\"color: #89DDFF\">()<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">goto<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/example.com<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #82AAFF\">print<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #82AAFF\">page<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">title<\/span><span style=\"color: #89DDFF\">())<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    browser<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">close<\/span><span style=\"color: #89DDFF\">()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Python\u306e\u5834\u5408\u3082\u3001<code>page.locator()<\/code> \u3084 <code>page.text_content()<\/code> \u306a\u3069\u306e Locator\u3067\u8981\u7d20\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__6\" class=\"wp-block-heading\">Playwright MCP\u304c\u5b9f\u73fe\u3059\u308bAI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3078\u306e\u30d6\u30e9\u30a6\u30b6\u64cd\u4f5c\u79fb\u8b72<\/h2>\n\n\n\n<h3 id=\"outline__6_1\" class=\"wp-block-heading\">Model Context Protocol\uff08MCP\uff09\u306e\u4ed5\u7d44\u307f\u3068\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">MCP\u3068\u306f\u3001AI\u3068\u5916\u90e8\u30c4\u30fc\u30eb\u3092\u5b89\u5168\u306b\u63a5\u7d9a\u3059\u308b\u305f\u3081\u306e\u5171\u901a\u898f\u683c(\u30d7\u30ed\u30c8\u30b3\u30eb)\u306e\u3053\u3068\u3092\u8a00\u3044\u307e\u3059\u3002<br>Playwright MCP\u306e\u5834\u5408\u3001\u30da\u30fc\u30b8\u9077\u79fb\u3084\u30af\u30ea\u30c3\u30af\u3001\u30d5\u30a9\u30fc\u30e0\u5165\u529b\u3068\u3044\u3063\u305f\u30d6\u30e9\u30a6\u30b6\u64cd\u4f5c\u3092AI\u306b\u81ea\u5f8b\u7684\u306b\u5b9f\u884c\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u624b\u52d5\u3067\u5b9f\u884c\u3057\u305f\u30c6\u30b9\u30c8\u3092\u5143\u306b\u3001AI\u3067\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u3068\u3044\u3063\u305f\u6d3b\u7528\u65b9\u6cd5\u3082\u3042\u308a\u307e\u3059\u3002<br>\u3053\u308c\u306b\u3088\u308a\u3001\u4f5c\u696d\u52b9\u7387\u3092\u5927\u5e45\u306b\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__6_2\" class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u6642\u4ee3\u304b\u3089AI\u306b\u6307\u793a\u3059\u308b\u6642\u4ee3\u3078<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f93\u6765\u306e\u958b\u767a\u3067\u306f\u3001\u5b9f\u884c\u3057\u305f\u3044\u64cd\u4f5c\u3092\u30b3\u30fc\u30c9\u3067\u7d30\u304b\u304f\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u65b9\u3001MCP\u3092\u6d3b\u7528\u3057\u305f\u5834\u5408\u3001\u300c\u7ba1\u7406\u753b\u9762\u3078\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u6ce8\u6587\u4e00\u89a7\u3092\u53d6\u5f97\u3057\u3066\u300d \u306a\u3069\u3068\u3044\u3063\u305f\u5185\u5bb9\u3092\u6307\u793a\u3059\u308b\u3060\u3051\u3067\u3001AI\u304c\u30d6\u30e9\u30a6\u30b6\u64cd\u4f5c\u3092\u884c\u3063\u3066\u304f\u308c\u308b\u4e16\u754c\u304c\u73fe\u5b9f\u306b\u306a\u308a\u3064\u3064\u3042\u308a\u307e\u3059\u3002<br>\u4eca\u5f8c\u306f\u3001\u30c6\u30b9\u30c8\u306e\u81ea\u52d5\u751f\u6210\u3084\u696d\u52d9\u306e\u81ea\u52d5\u5316\u306a\u3069\u3001\u69d8\u3005\u306a\u5834\u9762\u3078\u3068\u5229\u7528\u7bc4\u56f2\u304c\u62e1\u5927\u3059\u308b\u3068\u8003\u3048\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 id=\"outline__7\" class=\"wp-block-heading\">Playwright MCP\u30b5\u30fc\u30d0\u30fc\u306e\u52d5\u304b\u3057\u65b9\u3068Claude\u9023\u643a\u306e\u624b\u9806<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright MCP\u306f\u3001\u4e3b\u306b\u4ee5\u4e0b\u306eMCP\u5bfe\u5fdc\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u9023\u643a\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>VS Code<\/li>\n\n\n\n<li>Cursor<\/li>\n\n\n\n<li>Windsurf<\/li>\n\n\n\n<li>Claude Code<\/li>\n\n\n\n<li>Claude Desktop<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u4e0a\u8a18\u306e\u4e2d\u304b\u3089\u3001Claude Desktop\u3068\u306e\u9023\u643a\u65b9\u6cd5\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 id=\"outline__7_1\" class=\"wp-block-heading\">Claude Desktop\u3068\u9023\u643a\u3059\u308b\u624b\u9806<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Claude Desktop\u3068\u9023\u643a\u3059\u308b\u5834\u5408\u306f\u3001\u307e\u305a\u4ee5\u4e0b\u306e\u624b\u9806\u3067 claude_desktop_config.json \u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Claude Desktop\u306e\u8a2d\u5b9a\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304f<\/li>\n\n\n\n<li>\u958b\u767a\u8005\u30bf\u30d6\u306b\u79fb\u52d5\u3059\u308b<\/li>\n\n\n\n<li>\u69cb\u6210\u3092\u7de8\u96c6 (Edit Config) \u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u8a18\u306e\u624b\u9806\u3092\u884c\u3044\u3001config.json\u30d5\u30a1\u30a4\u30eb\u304c\u7121\u4e8b\u306b\u958b\u304b\u308c\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#304047;color:#d5ffff\">JSON<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#EEFFFF;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>{\n  \"mcpServers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": &#91;\n        \"@playwright\/mcp@latest\"\n      &#93;\n    }\n  }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme\" style=\"background-color: #263238\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C792EA\">mcpServers<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #FFCB6B\">playwright<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F78C6C\">command<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">npx<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #F78C6C\">args<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #EEFFFF\"> <\/span><span style=\"color: #89DDFF\">&#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">        <\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">@playwright\/mcp@latest<\/span><span style=\"color: #89DDFF\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">      <\/span><span style=\"color: #89DDFF\">&#93;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">    <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #EEFFFF\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Claude Desktop\u3092\u518d\u8d77\u52d5\u3057\u3066\u8a2d\u5b9a\u3092\u53cd\u6620\u3055\u305b\u305f\u5f8c\u3001\u8a2d\u5b9a\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u958b\u767a\u8005\u30bf\u30d6\u306bplaywright\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308c\u3070\u8a2d\u5b9a\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9f\u969b\u306bMCP\u3092\u52d5\u304b\u3059\u969b\u306f\u3001\u4e3b\u306b\u4ee5\u4e0b\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u9762\u306b\u304a\u3051\u308b\u5bfe\u7b56\u304c\u91cd\u8981\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4fe1\u983c\u3067\u304d\u308b\u30b5\u30a4\u30c8\u306e\u307f\u64cd\u4f5c\u3059\u308b<\/li>\n\n\n\n<li>\u8a8d\u8a3c\u60c5\u5831\u3092\u30cf\u30fc\u30c9\u30b3\u30fc\u30c9\u3057\u306a\u3044<\/li>\n\n\n\n<li>\u6a29\u9650\u3092\u6700\u5c0f\u9650\u306b\u3059\u308b<\/li>\n\n\n\n<li>AI\u3078\u6a5f\u5bc6\u60c5\u5831\u3092\u4e0d\u7528\u610f\u306b\u6e21\u3055\u306a\u3044<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u305f\u3001\u672c\u756a\u74b0\u5883\u3078\u306e\u81ea\u52d5\u64cd\u4f5c\u3092\u884c\u306a\u3046\u5834\u5408\u306f\u3001\u5341\u5206\u306a\u691c\u8a3c\u3092\u884c\u3063\u305f\u4e0a\u3067\u5c0e\u5165\u3059\u308b\u3088\u3046\u6ce8\u610f\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h2 id=\"outline__8\" class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright\u306f\u3001E2E\u30c6\u30b9\u30c8\u304b\u3089\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\u307e\u3067\u5e45\u5e83\u304f\u6d3b\u7528\u3067\u304d\u308b\u4fbf\u5229\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002<br>\u307e\u305f\u3001\u81ea\u52d5\u5316\u30c4\u30fc\u30eb\u3068\u3057\u3066\u3060\u3051\u3067\u306a\u304f\u3001AI\u306e\u30d6\u30e9\u30a6\u30b6\u64cd\u4f5c\u57fa\u76e4\u3068\u3057\u3066\u3082\u91cd\u8981\u6027\u3092\u5897\u3057\u3066\u3044\u304f\u6280\u8853\u306e\u4e00\u3064\u3068\u3082\u8a00\u3048\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"BreadcrumbList\",\n    \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"TechMania \u73fe\u5f79\u30d7\u30ed\u30b0\u30e9\u30de\u306e\u6280\u8853\u30d6\u30ed\u30b0\",\n      \"item\": \"https:\/\/techmania.jp\/blog\/\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Other\",\n      \"item\": \"https:\/\/techmania.jp\/blog\/category\/uncategorized\/\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Playwright\u3067Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b\uff5c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac\",\n      \"item\": \"https:\/\/techmania.jp\/blog\/playwright\/\"\n    }\n    ]\n  }\n<\/script>\n\n<script type=\"application\/ld+json\"> \n  {\n    \"@context\": \"https:\/\/schema.org\", \n    \"@type\": \"Article\", \n    \"headline\": \"Playwright\u3067Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b\uff5c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac\", \n    \"url\": \"https:\/\/techmania.jp\/blog\/playwright\/\", \n    \"image\": \"https:\/\/web-img.rensa.jp.net\/images\/techmania\/thumbnail\/images\/Playwright.webp\", \n    \"author\": { \n      \"@type\": \"Person\", \n      \"@id\": \"https:\/\/techmania.jp\/blog\/#person\",\n      \"name\": \"\u30c6\u30c3\u30af\u30de\u30cb\u30a2\u7de8\u96c6\u90e8 \u65e9\u5ddd\", \n      \"url\": \"https:\/\/techmania.jp\/blog\/author\/k-h\/\",\n      \"jobTitle\": \"\u73fe\u5f79\u30d7\u30ed\u30b0\u30e9\u30de\u30fc \/ \u6280\u8853\u76e3\u4fee\", \n      \"description\": \"5\u5e74\u4ee5\u4e0a\u306b\u6e21\u308aiOS\u3001Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u8a2d\u8a08\u304b\u3089\u4fdd\u5b88\u307e\u3067\u4e00\u8cab\u3057\u305f\u5b9f\u52d9\u7d4c\u9a13\u304c\u3042\u308b\u3002Swift\u3001Objective-C\u3001Firebase\u3001AppsFlyer\u3001Repro\u306b\u7cbe\u901a\u3002 \u76f4\u8fd1\u3067\u306fPython\u3084JavaScript\u3092\u7528\u3044\u305fWeb\u958b\u767a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u643a\u308f\u308a\u3001Django\u3001DBeaver\u306a\u3069\u5e45\u3092\u5e83\u3052\u3066\u3044\u308b\u3002IT\u6280\u8853\u30e1\u30c7\u30a3\u30a2TechMania\u3067\u306f\u3001\u6280\u8853\u76e3\u4fee\u3068\u3057\u3066\u73fe\u5834\u306e\u30c8\u30e9\u30d6\u30eb\u3084\u6700\u65b0\u306e\u6280\u8853\u4ed5\u69d8\u306b\u57fa\u3065\u3044\u305f\u3001\u6709\u76ca\u306a\u60c5\u5831\u3092\u767a\u4fe1\u3002\u904b\u55b6\u5143\u30fb\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\u304c\u4fdd\u6709\u3059\u308bIT\u6280\u8853\u60c5\u5831\u3068\u3068\u3082\u306b\u3001\u521d\u5fc3\u8005\u306b\u3082\u5206\u304b\u308a\u3084\u3059\u304f\u3001\u73fe\u5834\u3067\u4f7f\u3048\u308b\u6280\u8853\u3092\u5c4a\u3051\u3066\u3044\u308b\u3002\"\n    }\n  }\n<\/script>\n\n<script type=\"application\/ld+json\">\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"Organization\", \"address\": {\n      \"@type\": \"PostalAddress\",\n      \"addressLocality\": \"\u6e0b\u8c37\u533a\",\n      \"addressRegion\": \"\u6771\u4eac\u90fd\",\n      \"postalCode\": \"151-0051\",\n      \"streetAddress\": \"\u5343\u99c4\u30f6\u8c373-16-5 MUPRE\u5317\u53c2\u90532\u968e\",\n      \"addressCountry\": \"jp\"\n    },\n    \"founder\": {\n      \"@type\": \"Person\",\n      \"name\": \"\u6b66\u4e95 \u54f2\u4e5f\",\n      \"jobTitle\": \"\u4ee3\u8868\u53d6\u7de0\u5f79\"\n    },\n    \"name\": \"\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\",\n    \"url\": \"https:\/\/rensa.co.jp\/\",\n    \"telephone\": \"03-6457-5500\",\n    \"alternateName\": \"RENSA\",\n    \"foundingDate\": \"2011\/02\/18\",\n    \"description\": \"\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\u306f\u3001\u81ea\u793e\u30b3\u30f3\u30c6\u30f3\u30c4\u904b\u7528\u3092\u8ef8\u306b\u300c\u30aa\u30a6\u30f3\u30c9\u30e1\u30c7\u30a3\u30a2\u904b\u55b6\u300d\u300c\u5404\u30e1\u30c7\u30a3\u30a2\u306e\u5e83\u544a\u904b\u7528\u300d\u300c\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u80b2\u6210\u300d\u300c\u30b7\u30b9\u30c6\u30e0\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\u4e8b\u696d\u300d\u3092\u5c55\u958b\u3057\u3066\u3044\u307e\u3059\u3002\u6e29\u5ea6\u3092\u611f\u3058\u308b\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6\u3068\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\u3067\u793e\u4f1a\u306b\u8ca2\u732e\u3057\u307e\u3059\u3002\",\n    \"logo\": \"https:\/\/rensa.co.jp\/wp-content\/uploads\/2018\/10\/r-logo2.png\"\n  }\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"ProfilePage\",\n  \"mainEntity\": {\n    \"@type\": \"Person\",\n    \"@id\": \"https:\/\/techmania.jp\/blog\/#person\",\n    \"name\": \"\u30c6\u30c3\u30af\u30de\u30cb\u30a2\u7de8\u96c6\u90e8 \u65e9\u5ddd\",\n    \"jobTitle\": \"\u73fe\u5f79\u30d7\u30ed\u30b0\u30e9\u30de\u30fc \/ \u6280\u8853\u76e3\u4fee\",\n    \"description\": \"5\u5e74\u4ee5\u4e0a\u306b\u6e21\u308aiOS\u3001Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u8a2d\u8a08\u304b\u3089\u4fdd\u5b88\u307e\u3067\u4e00\u8cab\u3057\u305f\u5b9f\u52d9\u7d4c\u9a13\u304c\u3042\u308b\u3002Swift\u3001Objective-C\u3001Firebase\u3001AppsFlyer\u3001Repro\u306b\u7cbe\u901a\u3002 \u76f4\u8fd1\u3067\u306fPython\u3084JavaScript\u3092\u7528\u3044\u305fWeb\u958b\u767a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u643a\u308f\u308a\u3001Django\u3001DBeaver\u306a\u3069\u5e45\u3092\u5e83\u3052\u3066\u3044\u308b\u3002IT\u6280\u8853\u30e1\u30c7\u30a3\u30a2TechMania\u3067\u306f\u3001\u6280\u8853\u76e3\u4fee\u3068\u3057\u3066\u73fe\u5834\u306e\u30c8\u30e9\u30d6\u30eb\u3084\u6700\u65b0\u306e\u6280\u8853\u4ed5\u69d8\u306b\u57fa\u3065\u3044\u305f\u3001\u6709\u76ca\u306a\u60c5\u5831\u3092\u767a\u4fe1\u3002\u904b\u55b6\u5143\u30fb\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\u304c\u4fdd\u6709\u3059\u308bIT\u6280\u8853\u60c5\u5831\u3068\u3068\u3082\u306b\u3001\u521d\u5fc3\u8005\u306b\u3082\u5206\u304b\u308a\u3084\u3059\u304f\u3001\u73fe\u5834\u3067\u4f7f\u3048\u308b\u6280\u8853\u3092\u5c4a\u3051\u3066\u3044\u308b\u3002\",\n    \"url\": \"https:\/\/techmania.jp\/blog\/author\/k-h\/\",\n    \"knowsAbout\": [\n        \"Objective-C\", \"Swift\", \"HTML\", \"CSS\", \"JavaScript\", \"Python\", \"Django\", \"Xcode\", \"VS Code\", \"Docker\", \"Git\", \"Firebase\"\n      ],\n      \"hasOccupation\": [\n        {\n          \"@type\": \"Occupation\",\n          \"name\": \"iOS\u30a2\u30d7\u30ea\u904b\u7528\u30fb\u4fdd\u5b88\u30a8\u30f3\u30b8\u30cb\u30a2\",\n          \"description\": \"2019\u5e7412\u6708\u304b\u30895\u5e746\u30f6\u6708\u306eiOS\u30a2\u30d7\u30ea\u958b\u767a\u30fb\u4fdd\u5b88\u7d4c\u9a13\"\n        },\n        {\n          \"@type\": \"Occupation\",\n          \"name\": \"Web\u30b5\u30a4\u30c8\u904b\u7528\u30fb\u4fdd\u5b88\u30a8\u30f3\u30b8\u30cb\u30a2\",\n          \"description\": \"2025\u5e7410\u6708\u304b\u3089\u306eWeb\u30b7\u30b9\u30c6\u30e0\uff08Python\/Django\uff09\u904b\u7528\u30fb\u4fdd\u5b88\u7d4c\u9a13\"\n        }\n      ],\n    \"worksFor\": {\n      \"@type\": \"Organization\",\n      \"name\": \"\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\",\n      \"sameAs\": \"https:\/\/rensa.co.jp\/\"\n    },\n    \"affiliation\": {\n      \"@type\": \"Organization\",\n      \"name\": \"\u30c6\u30c3\u30af\u30de\u30cb\u30a2\"\n    }\n    }\n  }\n<\/script>\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"BreadcrumbList\",\n      \"itemListElement\": [\n        { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"TechMania \u73fe\u5f79\u30d7\u30ed\u30b0\u30e9\u30de\u306e\u6280\u8853\u30d6\u30ed\u30b0\", \"item\": \"https:\/\/techmania.jp\/blog\/\" },\n        { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Other\", \"item\": \"https:\/\/techmania.jp\/blog\/category\/uncategorized\/\" },\n        { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Playwright\u3067Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b\uff5c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac\", \"item\": \"https:\/\/techmania.jp\/blog\/playwright\/\" }\n      ]\n    },\n    {\n      \"@type\": \"Article\",\n      \"headline\": \"Playwright\u3067Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b\uff5c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304b\u3089\u5b9f\u8df5\u307e\u3067\u89e3\u8aac\",\n      \"url\": \"https:\/\/techmania.jp\/blog\/playwright\/\",\n      \"image\": \"https:\/\/web-img.rensa.jp.net\/images\/techmania\/thumbnail\/images\/Playwright.webp\",\n      \"author\": { \"@id\": \"https:\/\/techmania.jp\/blog\/#person\" },\n      \"publisher\": { \"@id\": \"https:\/\/techmania.jp\/#organization\" }\n    },\n    {\n      \"@type\": \"Organization\",\n      \"@id\": \"https:\/\/techmania.jp\/#organization\",\n      \"name\": \"\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\",\n      \"url\": \"https:\/\/rensa.co.jp\/\",\n      \"logo\": \"https:\/\/rensa.co.jp\/wp-content\/uploads\/2018\/10\/r-logo2.png\",\n      \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"addressLocality\": \"\u6e0b\u8c37\u533a\",\n        \"addressRegion\": \"\u6771\u4eac\u90fd\",\n        \"postalCode\": \"151-0051\",\n        \"streetAddress\": \"\u5343\u99c4\u30f6\u8c373-16-5 MUPRE\u5317\u53c2\u90532\u968e\",\n        \"addressCountry\": \"jp\"\n      }\n    },\n    {\n      \"@type\": \"Person\",\n      \"@id\": \"https:\/\/techmania.jp\/blog\/#person\",\n      \"name\": \"\u30c6\u30c3\u30af\u30de\u30cb\u30a2\u7de8\u96c6\u90e8 \u65e9\u5ddd\",\n      \"jobTitle\": \"\u73fe\u5f79\u30d7\u30ed\u30b0\u30e9\u30de\u30fc \/ \u6280\u8853\u76e3\u4fee\",\n      \"url\": \"https:\/\/techmania.jp\/blog\/author\/k-h\/\",\n      \"description\": \"5\u5e74\u4ee5\u4e0a\u306b\u6e21\u308aiOS\u3001Web\u30a2\u30d7\u30ea\u958b\u767a\u306b\u304a\u3044\u3066\u3001\u8a2d\u8a08\u304b\u3089\u4fdd\u5b88\u307e\u3067\u4e00\u8cab\u3057\u305f\u5b9f\u52d9\u7d4c\u9a13\u304c\u3042\u308b\u3002Swift\u3001Objective-C\u3001Firebase\u3001AppsFlyer\u3001Repro\u306b\u7cbe\u901a\u3002 \u76f4\u8fd1\u3067\u306fPython\u3084JavaScript\u3092\u7528\u3044\u305fWeb\u958b\u767a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u643a\u308f\u308a\u3001Django\u3001DBeaver\u306a\u3069\u5e45\u3092\u5e83\u3052\u3066\u3044\u308b\u3002IT\u6280\u8853\u30e1\u30c7\u30a3\u30a2TechMania\u3067\u306f\u3001\u6280\u8853\u76e3\u4fee\u3068\u3057\u3066\u73fe\u5834\u306e\u30c8\u30e9\u30d6\u30eb\u3084\u6700\u65b0\u306e\u6280\u8853\u4ed5\u69d8\u306b\u57fa\u3065\u3044\u305f\u3001\u6709\u76ca\u306a\u60c5\u5831\u3092\u767a\u4fe1\u3002\u904b\u55b6\u5143\u30fb\u682a\u5f0f\u4f1a\u793e\u30ec\u30f3\u30b5\u304c\u4fdd\u6709\u3059\u308bIT\u6280\u8853\u60c5\u5831\u3068\u3068\u3082\u306b\u3001\u521d\u5fc3\u8005\u306b\u3082\u5206\u304b\u308a\u3084\u3059\u304f\u3001\u73fe\u5834\u3067\u4f7f\u3048\u308b\u6280\u8853\u3092\u5c4a\u3051\u3066\u3044\u308b\u3002\",\n      \"knowsAbout\": [\n        \"Objective-C\", \"Swift\", \"HTML\", \"CSS\", \"JavaScript\", \"Python\", \"Django\", \"Xcode\", \"VS Code\", \"Docker\", \"Git\", \"Firebase\"\n      ],\n      \"hasOccupation\": [\n        {\n          \"@type\": \"Occupation\",\n          \"name\": \"iOS\u30a2\u30d7\u30ea\u904b\u7528\u30fb\u4fdd\u5b88\u30a8\u30f3\u30b8\u30cb\u30a2\",\n          \"description\": \"2019\u5e7412\u6708\u304b\u30895\u5e746\u30f6\u6708\u306eiOS\u30a2\u30d7\u30ea\u958b\u767a\u30fb\u4fdd\u5b88\u7d4c\u9a13\"\n        },\n        {\n          \"@type\": \"Occupation\",\n          \"name\": \"Web\u30b5\u30a4\u30c8\u904b\u7528\u30fb\u4fdd\u5b88\u30a8\u30f3\u30b8\u30cb\u30a2\",\n          \"description\": \"2025\u5e7410\u6708\u304b\u3089\u306eWeb\u30b7\u30b9\u30c6\u30e0\uff08Python\/Django\uff09\u904b\u7528\u30fb\u4fdd\u5b88\u7d4c\u9a13\"\n        }\n      ],\n      \"worksFor\": { \"@id\": \"https:\/\/techmania.jp\/#organization\" },\n      \"affiliation\": { \"@type\": \"Organization\", \"name\": \"\u30c6\u30c3\u30af\u30de\u30cb\u30a2\" }\n    }\n  ]\n}\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"Playwright\u3092\u4f7f\u3063\u305fWeb\u30c6\u30b9\u30c8\u81ea\u52d5\u5316\u306e\u89e3\u8aac\u8a18\u4e8b\u3067\u3059\u3002\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u3084Selenium\u30fbCypress\u3068\u306e\u9055\u3044\u3068\u3044\u3063\u305f\u57fa\u672c\u304b\u3089\u3001Next.js\u3067\u306eE2E\u30c6\u30b9\u30c8\u3001AI\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3068\u306e\u9023\u643a\uff08MCP\uff09\u307e\u3067\u5e45\u5e83\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002","protected":false},"author":12,"featured_media":10564,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"fifu_image_url":"https:\/\/web-img.rensa.jp.net\/images\/techmania\/thumbnail\/images\/Playwright.webp","fifu_image_alt":"\u3010Playwright\u3011Web\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u5316\u3059\u308b","footnotes":""},"categories":[1],"tags":[],"class_list":["post-10559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/10559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/comments?post=10559"}],"version-history":[{"count":7,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/10559\/revisions"}],"predecessor-version":[{"id":10745,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/posts\/10559\/revisions\/10745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/media\/10564"}],"wp:attachment":[{"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/media?parent=10559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/categories?post=10559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmania.jp\/blog\/wp-json\/wp\/v2\/tags?post=10559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}