CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>テスト自動化環境のセットアップ - ウェブ開発の学習 | MDN</title><link rel="alternate" title="Setting up your own test automation environment" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" hrefLang="en"/><link rel="alternate" title="Einrichtung Ihrer eigenen Testautomatisierungsumgebung" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" hrefLang="de"/><link rel="alternate" title="搭建自己的自动化测试环境" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" hrefLang="zh"/><link rel="alternate" title="テスト自動化環境のセットアップ" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" hrefLang="ja"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。"/><meta property="og:url" content="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment"/><meta property="og:title" content="テスト自動化環境のセットアップ - ウェブ開発の学習 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="ja"/><meta property="og:description" content="この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/ja/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/ja/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/ja/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/ja/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/ja/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/ja/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/ja/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/ja/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/ja/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/ja/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/ja/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/ja/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/ja/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/ja/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/ja/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FYour_own_automation_environment" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FYour_own_automation_environment" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">ウェブ開発の学習</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">発展モジュール</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions/Testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">テスト</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">テスト自動化環境のセットアップ</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>日本語</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/ja/docs/MDN/Community/Contributing/Translated_content#アクティブなロケール">このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#selenium">Selenium</a></li><li class="document-toc-item "><a class="document-toc-link" href="#一度に複数ブラウザーでテストする">一度に複数ブラウザーでテストする</a></li><li class="document-toc-item "><a class="document-toc-link" href="#webdriver_構文速習コース">WebDriver 構文速習コース</a></li><li class="document-toc-item "><a class="document-toc-link" href="#テストのベストプラクティス">テストのベストプラクティス</a></li><li class="document-toc-item "><a class="document-toc-link" href="#リモートテストの実行">リモートテストの実行</a></li><li class="document-toc-item "><a class="document-toc-link" href="#selenium_と_ci_ツールのインテグレーション">Selenium と CI ツールのインテグレーション</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/ja/docs/Learn_web_development/Getting_started">Getting started modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup">Environment setup</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">ウェブの閲覧</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">コードエディター</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">コマンドライン短期集中講座</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website">Your first website</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: コンテンツの作成</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: コンテンツのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: 操作の追加</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">ウェブサイトの公開</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards">Web standards</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">ウェブのしくみ</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">ウェブ標準モデル</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills">Soft skills</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">調査と学習</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">共同作業とチームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">ワークフローとプロセス</a></li><li><a href="/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">面接で成功するために</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn_web_development/Core">Core modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Structuring_content">Structuring content with HTML</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">基本的な HTML の構文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML の見出しと段落</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">強調と重要性</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Lists">リスト</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">高度なテキスト装飾</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links">リンクの作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">課題: 手紙のマークアップ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">課題: コンテンツのページの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML の画像</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表のアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">課題: 惑星データの構造化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms">HTML におけるフォームとボタン</a></li><li><a href="/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML のデバッグ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS styling basics</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">課題: 経歴ページのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">基本的な CSS セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Combinators">結合子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">競合の処理</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Sizing">CSS におけるアイテムのサイズ設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Overflow">コンテンツのオーバーフロー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">課題: 基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">課題: かっこいいボックス</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Text_styling">CSS text styling</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists">リストのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/CSS_layout">CSS レイアウト</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Grids">CSS グリッドレイアウト</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries">メディアクエリーの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Scripting">Dynamic scripting with JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Arrays">配列</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator">課題: バカ話ジェネレーター</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Conditionals">コードでの意思決定 — 条件文</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Loops">ループするコード</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Events">イベント入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Image_gallery">課題: イメージギャラリー</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM スクリプティング入門</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Network_requests">ネットワークリクエストを JavaScript で作成</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript frameworks and libraries</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">フレームワークの主な機能</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">React で ToDo リストを始める</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components">React アプリのコンポーネント化</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React での操作の実装: イベントと状態</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">React でのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React のリソース</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Core/Accessibility">Accessibility</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Tooling">アクセシビリティツールと支援技術</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Core/Design_for_developers">Design for developers</a></li><li><a href="/ja/docs/Learn_web_development/Core/Version_control">Version control</a></li><li class="section"><a href="/ja/docs/Learn_web_development/Extensions">Extension modules</a></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs">クライアントサイド Web API</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">クライアント側ストレージ</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">サードパーティ API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Async_JS">非同期 JavaScript</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Forms">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Form_validation">クライアント側のフォーム検証</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools">Understanding client-side tools</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side">Server-side websites</a></summary><ol><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps">Server-side first steps</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models" class="only-in-en-us">Django Tutorial Part 3: Using models</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site" class="only-in-en-us">Django Tutorial Part 4: Django admin site</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page" class="only-in-en-us">Django Tutorial Part 5: Creating our home page</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views" class="only-in-en-us">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions" class="only-in-en-us">Django Tutorial Part 7: Sessions framework</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication" class="only-in-en-us">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms" class="only-in-en-us">Django Tutorial Part 9: Working with forms</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing" class="only-in-en-us">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment" class="only-in-en-us">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security" class="only-in-en-us">Django web application security</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog" class="only-in-en-us">Assessment: DIY Django mini blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web framework (Node.js)</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes" class="only-in-en-us">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment" class="only-in-en-us">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Extensions/Performance">Web performance</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/ja/docs/Learn_web_development/Extensions/Testing">Testing</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">一般的な HTML と CSS の問題の処理</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing">自動化テストの紹介</a></li><li><em><a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment" aria-current="page">テスト自動化環境のセットアップ</a></em></li></ol></details></li><li><a href="/ja/docs/Learn_web_development/Extensions/Transform_animate">Transform and animate CSS</a></li><li><a href="/ja/docs/Learn_web_development/Extensions/Security_privacy">Security and privacy</a></li><li class="section">その他のリソース</li><li class="toggle"><details><summary><a href="/ja/docs/Learn_web_development/Howto">How to solve common problems</a></summary><ol><li><a href="/ja/docs/Learn_web_development/Howto/Solve_HTML_problems">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_CSS_problems">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn_web_development/Howto/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">About</a></li><li><a href="/ja/docs/Learn_web_development/Educators">Resources for educators</a></li><li><a href="/ja/docs/Learn_web_development/Changelog">Changelog</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">この記事では</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#selenium">Selenium</a></li><li class="document-toc-item "><a class="document-toc-link" href="#一度に複数ブラウザーでテストする">一度に複数ブラウザーでテストする</a></li><li class="document-toc-item "><a class="document-toc-link" href="#webdriver_構文速習コース">WebDriver 構文速習コース</a></li><li class="document-toc-item "><a class="document-toc-link" href="#テストのベストプラクティス">テストのベストプラクティス</a></li><li class="document-toc-item "><a class="document-toc-link" href="#リモートテストの実行">リモートテストの実行</a></li><li class="document-toc-item "><a class="document-toc-link" href="#selenium_と_ci_ツールのインテグレーション">Selenium と CI ツールのインテグレーション</a></li><li class="document-toc-item "><a class="document-toc-link" href="#まとめ">まとめ</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="ja"><header><h1>テスト自動化環境のセットアップ</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Testing"><span class="button-wrap"> Overview: テスト</span></a></li></ul> <p>この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提条件:</th> <td> <a href="/ja/docs/Learn_web_development/Core/Structuring_content">HTML</a>、<a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS</a>、<a href="/ja/docs/Learn_web_development/Core/Scripting">JavaScript</a> 言語の主要部に通じていること。 <a href="/ja/docs/Learn_web_development/Extensions/Testing/Introduction">ブラウザー横断テストの基本</a>および<a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing">自動化テスト</a>について高水準の考えを持っていること。 </td> </tr> <tr> <th scope="row">目標:</th> <td> Selenium によるローカルテスト環境のセットアップ方法や Selenium を使用したテストの実行方法、Sauce Labs や BrowserStack などのツールとの統合する方法の案内。 </td> </tr> </tbody> </table></figure></div><section aria-labelledby="selenium"><h2 id="selenium"><a href="#selenium">Selenium</a></h2><div class="section-content"><p><a href="https://www.selenium.dev/" class="external" target="_blank">Selenium</a> は最も人気のあるブラウザー自動化ツールです。他の方法もありますが、 Selenium を使用する最良の方法は WebDriver を使用することで、強力な API で Selenium 上に構築し、ブラウザーを呼び出して自動化し、「このウェブページを開く」、「この要素をページ上に移動する」、「このリンクをクリックする」、「リンクがこの URL を開くかどうかを確認する」などといったアクションを実行します。これは、自動テストを実行するのに最適です。</p> <p>WebDriver のインストール方法と使用方法は、テストの作成と実行に使用するプログラミング環境によって異なります。最も一般的な環境では、WebDriver とその言語、例えば Java、C＃、Ruby、Python、JavaScript (Node) などを使用して WebDriver と通信するのに必要なバインディングをインストールするパッケージまたはフレームワークが利用可能です。異なる言語の Selenium のセットアップの詳細については、 <a href="https://www.selenium.dev/documentation/webdriver/getting_started/" class="external" target="_blank">Setting Up a Selenium-WebDriver Project</a> を参照してください。</p> <p>異なるブラウザーでは、WebDriver と通信して制御するために異なるドライバーが必要です。ブラウザーのドライバーの入手先などについては、 <a href="https://www.selenium.dev/downloads/" class="external" target="_blank">Platforms Supported by Selenium</a> を参照してください。</p> <p>Node.js を使用した Selenium テストの作成と実行については、始める前にすばやく簡単に行うことができ、フロントエンド開発者にはもっと使い慣れた環境を提供する予定です。</p> <div class="notecard note"> <p><strong>メモ:</strong> 他のサーバーサイド環境で WebDriver を使用する方法を知りたい場合は、 <a href="https://www.selenium.dev/downloads/" class="external" target="_blank">Platforms Supported by Selenium</a> もチェックしてください。</p> </div></div></section><section aria-labelledby="node_で_selenium_のセットアップ"><h3 id="node_で_selenium_のセットアップ"><a href="#node_で_selenium_のセットアップ">Node で Selenium のセットアップ</a></h3><div class="section-content"><ol> <li> <p>まず、前章の <a href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing#node_と_npm_の設定">Node と npm の設定</a> で説明しているように、新しい npm プロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</p> </li> <li> <p>次に、 Node の内部から Selenium が機能するようにフレームワークをインストールする必要があります。更新頻度が高く、よく改善されるため、 <a href="https://www.npmjs.com/package/selenium-webdriver" class="external" target="_blank">selenium-webdriver</a> を選択します。もしも他の選択をするならば <a href="https://webdriver.io/" class="external" target="_blank">webdriver.io</a> と <a href="https://nightwatchjs.org/" class="external" target="_blank">nightwatch.js</a> もいい選択です。selenium-webdriver をインストールするため, プロジェクトフォルダーの下で以下のコマンドを走らせます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install selenium-webdriver </code></pre></div> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> 以前に selenium-webdriver をインストールしてブラウザードライバーをダウンロードした場合でも、これらの手順を実行することをお勧めします。すべてが最新であることを確認する必要があります。</p> </div> <p>次に、 WebDriver がテストしたいブラウザーを制御するために、関連するドライバーをダウンロードする必要があります。どこから取得するかは、 <a href="https://www.npmjs.com/package/selenium-webdriver" class="external" target="_blank">selenium-webdriver</a> ページに詳細があります（最初の節の表を見てください）。もちろん、いくつかのブラウザーは OS 固有のものですが、主要な OS で利用できる Firefox と Chrome に絞って説明します。</p> <ol> <li>最新の <a href="https://github.com/mozilla/geckodriver/releases/" class="external" target="_blank">GeckoDriver</a> （Firefox 用）と <a href="https://googlechromelabs.github.io/chrome-for-testing/#stable" class="external" target="_blank">ChromeDriver</a> ドライバーをダウンロードします。</li> <li>ホームユーザーディレクトリーのルートなど、移動しやすい場所に展開します。</li> <li><code>chromedriver</code> と <code>geckodriver</code> ドライバーの場所をシステムの <code>PATH</code> 変数に追加してください。これは、ハードディスクのルートから、ドライバーを格納するディレクトリーへの絶対パスでなければなりません。例えば、macOS マシンを使用していて、ユーザー名が bob で、ドライバーをホームフォルダーのルートに置くとしたら、パスは <code>/Users/bob</code> となります。</li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> もう一度言っておきますが、 <code>PATH</code> に追加するパスは、ドライバーそのものへのパスではなく、ドライバーを格納するディレクトリーへのパスである必要があります。これはよく間違えられます。</p> </div> <p>macOS システムとほとんどの Linux システムで <code>PATH</code> 変数を設定するには、次のようにします。</p> <ol> <li> <p><code>.zprofile</code> （または <code>bash</code> シェルを使用している場合はまだ <code>bash_profile</code> を開きます。</p> <div class="notecard note"> <p><strong>メモ:</strong> 隠しファイルが表示されていない場合は表示させる必要があります。 <a href="https://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/" class="external" target="_blank">Show/Hide hidden files in macOS</a> または <a href="https://askubuntu.com/questions/470837/how-to-show-hidden-folders-in-file-manager-nautilus-on-ubuntu" class="external" target="_blank">Show hidden folders in Ubuntu</a> を参照してください。</p> </div> </li> <li> <p>ファイルの一番下に以下を貼り付けます（パスはあなたのマシンで実際に使用されているものに更新してください）。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>#Add WebDriver browser drivers to PATH export PATH=$PATH:/Users/bob </code></pre></div> </li> <li> <p>このファイルを保存して閉じてから、端末/コマンドプロンプトを再起動して Bash 設定を再適用します。</p> </li> <li> <p>新しいパスが <code>PATH</code> 変数に入っているか、端末に以下のように入力して調べます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>echo $PATH </code></pre></div> <p>端末に表示されるはずです。</p> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> Windows で <code>PATH</code> 変数を設定するには、<a href="https://www.itprotoday.com/" class="external" target="_blank">How can I add a new folder to my system path?</a> の指示に従ってください。</p> </div> <p>すべてが動作していることを確認するために、簡単なテストをしてみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリーに <code>duck_test.js</code> と呼ばれる新しいファイルを作成します。</p> </li> <li> <p>そのファイルに以下のコンテンツを追加し、保存します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, Key, until } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); try { await driver.get("https://duckduckgo.com/"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.wait(until.titleIs("webdriver at DuckDuckGo"), 1000); console.log("Test passed!"); } catch (e) { console.log(`Error: ${e}`); } finally { await driver.sleep(2000); // 検索ページが見えるように待つ await driver.quit(); } })(); </code></pre></div> <div class="notecard note"> <p><strong>メモ:</strong> この関数は <a href="/ja/docs/Glossary/IIFE">IIFE</a> （即時実行関数式）です。</p> </div> </li> <li> <p>端末で、自分のプロジェクトフォルダー内にいることを確認し、以下のコマンドを入力します。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node duck_test </code></pre></div> </li> </ol> <p>Firefox のインスタンスが自動的に開くのが確認できるはずです。 Google が自動的にタブに読み込まれ、検索ボックスに "webdriver" と入力され、検索ボタンがクリックされます。その後、 WebDriver は 1 秒待ちます。文書タイトルがアクセスされ、 "webdriver at DuckDuckGo" であれば、テストが合格したとメッセージを返します。</p> <p>それから 2 秒待ち、 WebDriver は Firefox インスタンスを閉じて、停止します。</p></div></section><section aria-labelledby="一度に複数ブラウザーでテストする"><h2 id="一度に複数ブラウザーでテストする"><a href="#一度に複数ブラウザーでテストする">一度に複数ブラウザーでテストする</a></h2><div class="section-content"><p>複数のブラウザーで同時にテストを実行することを妨げるものは何もありません。試してみましょう。</p> <ol> <li> <p>自分のプロジェクトのディレクトリーに、 <code>duck_test_multiple.js</code> と呼ばれる新しいファイルを作成します。どのブラウザーが利用できるか応じて、追加した他のブラウザーへの参照を自由に変更したり、削除したりしてください。正しいブラウザードライバーを設定する必要があります。他のブラウザーのために <code>.forBrowser()</code> メソッド内で使用する文字列に関しては、 <a href="https://www.selenium.dev/selenium/docs/api/javascript/global.html#Browser" class="external" target="_blank">Browser enum</a> のリファレンスページを参照してください。</p> </li> <li> <p>以下の内容を記述し、保存してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, Key } = require("selenium-webdriver"); const driver_fx = new Builder().forBrowser(Browser.FIREFOX).build(); const driver_chr = new Builder().forBrowser(Browser.CHROME).build(); async function searchTest(driver) { try { await driver.get("https://duckduckgo.com/"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.sleep(2000); const title = await driver.getTitle(); if (title === "webdriver at DuckDuckGo") { console.log("Test passed"); } else { console.log("Test failed"); } } finally { driver.quit(); } } searchTest(driver_fx); searchTest(driver_chr); </code></pre></div> </li> <li> <p>端末で、自分のプロジェクトフォルダー内にいることを確認し、以下のコマンドを入力してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node duck_test_multiple </code></pre></div> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> もし Mac を使用していて Safari をテストしようとすると、エラーメッセージ "Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver." が表示されるかもしれません。これが表示された場合は、指定された指示に従ってもう一度試してください。</p> <p>ドライバーアプリが検証済みのソースからダウンロードされていないため、開くことができないというメッセージが表示される場合があります。これが出た場合、そのドライバアプリに対してのみセキュリティ設定を上書きすることができます。例えば、 Mac では、 <kbd>Ctrl</kbd> キーを押しながらアプリをクリックし、「開く」を選び、表示されるダイアログボックスで再度「開く」を選ぶことができます。</p> </div> <p>ここで、今回は <code>searchTest()</code> という関数の中にラップしたことを除いて、前と同じようにテストを行いました。複数のブラウザー用に新しいブラウザーインスタンスを作成し、それぞれを関数に渡すことで、 3 つのブラウザーすべてでテストが実行されるようにしています。</p> <p>楽しいですか？それでは次に、 WebDriver の構文の基本をもう少し詳しく見ていきましょう。</p></div></section><section aria-labelledby="webdriver_構文速習コース"><h2 id="webdriver_構文速習コース"><a href="#webdriver_構文速習コース">WebDriver 構文速習コース</a></h2><div class="section-content"><p>webdriver 構文のいくつかの主要な機能を見ていきましょう。完全に詳細を知りたい場合は、<a href="https://www.selenium.dev/selenium/docs/api/javascript/" class="external" target="_blank">selenium-webdriver JavaScript API reference</a> を参照してください。また、 Selenium main documentation の <a href="https://www.selenium.dev/documentation/webdriver/" class="external" target="_blank">Selenium WebDriver</a> には、様々な言語で書かれた複数の例が格納されています。</p></div></section><section aria-labelledby="新しいテストを始める"><h3 id="新しいテストを始める"><a href="#新しいテストを始める">新しいテストを始める</a></h3><div class="section-content"><p>新しいテストを始めるには、 <code>selenium-webdriver</code> モジュールを記載し、<code>Builder</code> コンストラクターと <code>Browser</code> インターフェイスをインポートする必要があります。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser } = require("selenium-webdriver"); </code></pre></div> <p><code>Builder()</code> コンストラクターを使用して新しいドライバーのインスタンスを作成し、 <code>forBrowser()</code> メソッドを連結して、このビルダーでテストしたいブラウザーを指定します。最後に <code>build()</code> メソッドを連結して、実際にドライバのインスタンスを構築します（これらの機能の詳細情報は <a href="https://www.selenium.dev/selenium/docs/api/javascript/Builder.html" class="external" target="_blank">Builder クラスリファレンス</a> を参照してください）。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let driver = new Builder().forBrowser(Browser.FIREFOX).build(); </code></pre></div> <p>なお、テストするブラウザーに固有の構成オプションを設定することは可能です。例えば、 <code>forBrowser()</code>　メソッドで、テストする特定のバージョンとOSを設定することができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let driver = new Builder().forBrowser(Browser.FIREFOX, "130", "MAC").build(); </code></pre></div> <p>例えば、環境変数を使ってこれらのオプションを設定することもできます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>SELENIUM_BROWSER=firefox:130:MAC </code></pre></div> <p>新しいテストを作成して、このコードを調べながら話を進めましょう。自分の selenium test プロジェクトディレクトリー内に、 <code>quick_test.js</code> と呼ばれる新しいファイルを作成し、以下のコードを追加してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); })(); </code></pre></div> <p>端末に次のコマンドを入力して、この例をテストすることができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node quick_test </code></pre></div></div></section><section aria-labelledby="テストする文書の取得"><h3 id="テストする文書の取得"><a href="#テストする文書の取得">テストする文書の取得</a></h3><div class="section-content"><p>実際にテストしたいページを読み込むには、例えば先ほど作成したドライバーのインスタンスの <code>get()</code> メソッドを使用します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>driver.get("http://www.google.com"); </code></pre></div> <div class="notecard note"> <p><strong>メモ:</strong> この章とその下記の機能の詳細については、<a href="https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html" class="external" target="_blank">WebDriver クラスリファレンス</a>を参照してください。</p> </div> <p>リソースを指す URL であればなんでも使用することができます。ローカル文書をテストするためには <code>file://</code> URL を含めることもできます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>driver.get("file:///Users/bob/git/examples/test_file.html"); </code></pre></div> <p>または</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>driver.get("http://localhost:8888/test_file.html"); </code></pre></div> <p>しかし、リモートサーバーの場所を使用したほうがコードの柔軟性が高まります。リモートサーバーを使用してテストを実行し始める際には（後述します）、ローカルパスを使用しようとするとコードが壊れてしまいます。</p> <p><code>example()</code> 関数を以下のように更新し、プレースホルダーのパスを、自分のコンピュータ上の実際の HTML ファイルへのローカルパスに置き換えてください。その後、実行してみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get("file:///Users/bob/git/examples/test_file.html"); })(); </code></pre></div></div></section><section aria-labelledby="文書とのやりとり"><h3 id="文書とのやりとり"><a href="#文書とのやりとり">文書とのやりとり</a></h3><div class="section-content"><p>これでテストする文書を取得したので、何か文書内で操作する必要があります。通常、最初にテストする固有の要素を選択する必要があります。 WebDriver では、ID、クラス、要素名などで<a href="https://www.selenium.dev/documentation/webdriver/elements/" class="external" target="_blank">多くの方法で UI 要素を選択する</a>ことができます。実際の選択は <code>findElement()</code> メソッドによって行われ、このメソッドは引数として選択メソッドを受け入れます。例えば、ID によって要素を選択するには、次のようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const element = driver.findElement(By.id("myElementId")); </code></pre></div> <p>CSSで要素を探す最も有益な方法の 1 つである <code>By.css()</code> メソッドを使用すると、 CSS セレクターを使用して要素を選択することができます。</p> <p>これで <code>example()</code> 関数を以下のように更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const button = driver.findElement(By.css("button:nth-of-type(1)")); })(); </code></pre></div></div></section><section aria-labelledby="要素のテスト"><h3 id="要素のテスト"><a href="#要素のテスト">要素のテスト</a></h3><div class="section-content"><p>ウェブ文書や文書内の要素を対話する方法はたくさんあります。 WebDriver ドキュメントの<a href="https://www.selenium.dev/documentation/webdriver/elements/information/#text-content" class="external" target="_blank">テキスト値を取得する</a>から始まる一般的な例を見ることができます。</p> <p>ボタンの中のテキストを取得したい場合、次のようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>button.getText().then((text) => { console.log(`Button text is '${text}'`); }); </code></pre></div> <p>下記の通り、これで <code>example()</code> 関数の末尾にこの例を追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const button = driver.findElement(By.css("button:nth-of-type(1)")); button.getText().then((text) => { console.log(`Button text is '${text}'`); }); })(); </code></pre></div> <p><code>node</code> を使用して、以前と同じように例を実行してください。コンソール内に、ボタンのテキストラベルが表示されるはずです。</p> <p>もう少し有益なことをしてみましょう。前回のコード項目を下記のように <code>button.click();</code> という行に置き換えてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const button = driver.findElement(By.css("button:nth-of-type(1)")); button.click(); })(); </code></pre></div> <p>ボタンがクリックされ、 <code>alert()</code> ポップアップが現れるはずです。少なくともボタンが動作していることがわかります。</p> <p>ポップアップを操作することもできます。 <code>example()</code> 関数を以下のように更新して、もう一度テストしてみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, until } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const button = driver.findElement(By.css("button:nth-of-type(1)")); button.click(); await driver.wait(until.alertIsPresent()); const alert = driver.switchTo().alert(); alert.getText().then((text) => { console.log(`Alert text is '${text}'`); }); alert.accept(); })(); </code></pre></div> <p>次に、フォーム要素のひとつにテキストを入力してみましょう。 <code>example()</code> 関数を以下のように更新して、もう一度テストを実行してみましょう。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, Key } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const input = driver.findElement(By.id("name")); input.sendKeys("Bob Smith"); input.sendKeys(Key.TAB); const input2 = driver.findElement(By.id("age")); input2.sendKeys("65"); })(); </code></pre></div> <p><code>Key</code> オブジェクトのプロパティを使用して、通常の文字で表せないキーを送信することができます。例えば、上ではフォーム入力を送信する前にタブで抜けるためにこの構文を使用しました。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>input.sendKeys(Key.TAB); </code></pre></div></div></section><section aria-labelledby="何かが完了するのを待つ"><h3 id="何かが完了するのを待つ"><a href="#何かが完了するのを待つ">何かが完了するのを待つ</a></h3><div class="section-content"><p>WebDriver が何かを完了するまで待ってからテストを行いたい時があります。例えば新しいページを読み込んだ場合、ページの DOM の読み込みが完了するまで待ってから要素を操作する必要があり、そうしないとテストが失敗する可能性が高くなります。</p> <p>例えばこの例の <code>duck_test_multiple.js</code> テストでは、次のようなブロックを含んでいます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>await driver.sleep(2000); </code></pre></div> <p><code>sleep()</code> メソッドにはミリ秒単位で待つ時間を指定する値を受け入れます。このメソッドはその時間の終わりに解決するプロミスを返し、この時点で <code>then()</code> 内のコードが実行されます。このケースでは <code>getTitle()</code> メソッドで現在のページのタイトルを取得し、その返値に応じて合格か不合格かを返しています。</p> <p><code>quick_test.js</code> のテストにも <code>sleep()</code> メソッドを追加することができます。 <code>example()</code> 関数をこの例のように更新してみてください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, Key } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const input = driver.findElement(By.id("name")); input.sendKeys("Bob Smith"); driver.sleep(1000).then(() => { input.getAttribute("value").then((value) => { if (value !== "") { console.log("Form input filled out"); } else { console.log("Text could not be entered"); } }); }); })(); </code></pre></div> <p>これで WebDriver はフォームフィールドを形成する前に 2 秒間待機します。そして、 <code>getAttribute()</code> を使用して <code>value</code> 属性値を取得して値が埋まっているかどうか（空でないかどうか）を検査し、空でなければコンソールにメッセージを出力します。</p> <div class="notecard note"> <p><strong>メモ:</strong> また、 <a href="https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait" class="external" target="_blank"><code>wait()</code></a> と呼ばれるメソッドがあります。これは、ある条件を一定時間繰り返しテストし、コードの実行を継続します。これも <a href="https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html" class="external" target="_blank">util ライブラリー</a>を使用しています。 util ライブラリーは <code>wait()</code> とともに使用する一般的な条件を定義しています。</p> </div></div></section><section aria-labelledby="使用後のドライバーのシャットダウン"><h3 id="使用後のドライバーのシャットダウン"><a href="#使用後のドライバーのシャットダウン">使用後のドライバーのシャットダウン</a></h3><div class="section-content"><p>テストの実行が完了したら、 <code>driver.quit()</code> メソッドを使用して開いたドライバインスタンスをすべてシャットダウンし、不必要なリソースを使用したままにしないようにする必要があります。 <code>quick_test.js</code> を以下のように更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, Browser, By, Key } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); const input = driver.findElement(By.id("name")); input.sendKeys("Bob Smith"); driver.sleep(1000).then(() => { input .getAttribute("value") .then((value) => { if (value !== "") { console.log("Form input filled out"); } else { console.log("Text could not be entered"); } }) .finally(() => { driver.quit(); }); }); })(); </code></pre></div> <p>これで実行すると、テストが実行され、テスト完了後にブラウザーインスタンスがシャットダウンされます。</p></div></section><section aria-labelledby="テストのベストプラクティス"><h2 id="テストのベストプラクティス"><a href="#テストのベストプラクティス">テストのベストプラクティス</a></h2><div class="section-content"><p>テストを書くための最善の手法については、これまで多くのことが書かれてきました。<a href="https://www.selenium.dev/documentation/test_practices/" class="external" target="_blank">テストプラクティス</a>を参照ください。一般的には、あなたのテストが次のようなものであることを確認すべきです。</p> <ol> <li>良いロケーター戦略を用いること。<a href="#文書とのやりとり">文書とのやりとり</a>のときには、ロケーターとページオブジェクトが変更されにくいものを使用するようにしましょう。テストを実行したいテスト可能な要素がある場合、次のサイトの反復処理で変更されることのない、安定した ID や CSS セレクターで選択できるページ上の位置を持つようにしましょう。テストは可能な限りもろくならないように、つまり、何かが変わっても壊れないようにしたいものです。</li> <li>アトミックなテストを書きます。各テストはひとつのことだけをテストするようにし、どのテストファイルがどの基準をテストしているのかを簡単に把握できるようにします。例えば、上で見た <code>duck_test.js</code> のテストは、検索結果ページのタイトルが正しく設定されているかどうかという単一のことをテストするだけなので、とても良いものです。このテストにもっと良い名前をつけて、テストを追加したときに、このテストが何をするのかがわかりやすいようにすることもできます。おそらく、 <code>results_page_title_set_correctly.js</code> が少し良いでしょうか？</li> <li>自律的なテストコードを書きましょう。各テストは自分自身で動作し、他のテストに依存して動作しないようにしましょう。</li> </ol> <p>さらに、テスト結果/報告についても言及すべきでしょう。上記の例では単純な <code>console.log()</code> 文を使って結果を報告していますが、これはすべて JavaScript で行っているため、 <a href="https://mochajs.org/" class="external" target="_blank">Mocha</a> や <a href="https://www.chaijs.com/" class="external" target="_blank">Chai</a>、他にも好きなテスト実行・報告システムを使用することができます。</p> <ol> <li> <p>例えば、 <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/selenium/mocha_test.js" class="external" target="_blank"><code>mocha_test.js</code></a> のローカルコピーを自分のプロジェクトディレクトリー内に作ってみてください。それを <code>test</code> というサブフォルダーに入れてください。この例では長いプロミスの連鎖を使用して、テストに必要なすべての段階を実行しています - WebDriver が使用するプロミスベースのメソッドは正しく作業するために解決する必要があります。</p> </li> <li> <p>自分のプロジェクトディレクトリーで以下のコマンドを実行して、 mocha テストハーネスをインストールします。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev mocha </code></pre></div> </li> <li> <p>これで、以下のコマンドを用いてテストを実行（および <code>test</code> ディレクトリーに置いた他のテストも実行）することができます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx mocha --no-timeouts </code></pre></div> </li> <li> <p>Mocha の任意のタイムアウト（3 秒）のためにテストが失敗してしまうことがないように、<code>--no-timeouts</code> フラグを記載する必要があります。</p> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> <a href="https://github.com/saucelabs-sample-test-frameworks" class="external" target="_blank">saucelabs-sample-test-frameworks</a> には、テスト/アサーションツールのさまざまな組み合わせを設定する方法を示す有益な例がいくつか含まれています。</p> </div></div></section><section aria-labelledby="リモートテストの実行"><h2 id="リモートテストの実行"><a href="#リモートテストの実行">リモートテストの実行</a></h2><div class="section-content"><p>リモートサーバー上でテストを実行するのは、ローカルで実行するよりもそれほど難しくないことがわかりました。ドライバーのインスタンスを作成するだけですが、テストしたいブラウザーに必要な機能、サーバーのアドレス、アクセスするために必要なユーザー資格情報（もしあれば）をいくつか指定します。</p></div></section><section aria-labelledby="browserstack"><h3 id="browserstack"><a href="#browserstack">BrowserStack</a></h3><div class="section-content"><p>BrowserStack で Selenium テストをリモートで動作するようにする方法の例を作成してみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリーに、 <code>bstack_duck_test.js</code> という新しいファイルを作成します。</p> </li> <li> <p>内容を以下のようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, By, Key } = require("selenium-webdriver"); // Input capabilities const capabilities = { "bstack:options": { os: "OS X", osVersion: "Sonoma", browserVersion: "17.0", local: "false", seleniumVersion: "3.14.0", userName: "YOUR-USER-NAME", accessKey: "YOUR-ACCESS-KEY", }, browserName: "Safari", }; const driver = new Builder() .usingServer("http://hub-cloud.browserstack.com/wd/hub") .withCapabilities(capabilities) .build(); (async function bStackGoogleTest() { try { await driver.get("https://duckduckgo.com/"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.sleep(2000); const title = await driver.getTitle(); if (title === "webdriver at DuckDuckGo") { console.log("Test passed"); } else { console.log("Test failed"); } } finally { await driver.sleep(4000); // Delay long enough to see search page! await driver.quit(); } })(); </code></pre></div> </li> <li> <p><a href="https://www.browserstack.com/accounts/profile/details" class="external" target="_blank">Account & Profile details page</a> から、ユーザー名とアクセシビリティキーを取得します（<em>Username and Access Keys</em> 参照）。コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> プレースホルダーを、実際のユーザー名とアクセスキーの値に置き換えてください（そして、それらを安全に保管してください）。</p> </li> <li> <p>以下のコマンドでテストを実行します。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node bstack_duck_test </code></pre></div> <p>テストは BrowserStack に送信され、テスト結果がコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p> </li> <li> <p>これで、 <a href="https://automate.browserstack.com/dashboard/" class="external" target="_blank">BrowserStack Automate dashboard</a> のページに戻ると、テストの一覧が表示され、テストを録画した動画や、テストに関する複数の詳細なログ情報などの詳細を見ることができます。 <img src="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/bstack_automated_results.png" alt="BrowserStack automated results" width="1000" height="504" loading="lazy"></p> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> Browserstack 自動化ダッシュボードの <em>Resources</em> メニューオプションには、自動テストを実行するために使用するための有益な情報が豊富に格納されています。ノード固有の情報については、 <a href="https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs" class="external" target="_blank">Selenium with NodeJS</a> を参照してください。</p> </div> <h4 id="プログラムによる_browserstack_テストの詳細の入力">プログラムによる BrowserStack テストの詳細の入力</h4> <p>BrowserStack REST API や他にもいくつかの機能を使用して、自分のテストに、合格したかどうか、合格した理由、テストがどのプロジェクトの一部であるかなどの詳細をアノテーションすることができます。 BrowserStack は既定ではこれらの詳細を知りません！</p> <p>それでは、 <code>bstack_duck_test.js</code> デモを更新して、これらがどのように動作するのかを示してみましょう。</p> <ol> <li> <p><a href="https://www.npmjs.com/package/axios" class="external" target="_blank">axios</a> モジュールをインストールするために、プロジェクトのディレクトリーから次のコマンドを実行します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>npm install axios </code></pre></div> </li> <li> <p>axios モジュールをインポートして、 BrowserStack の REST API にリクエストを送信することができるようにします。コードの一番上に以下の行を追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const axios = require("axios"); </code></pre></div> </li> <li> <p>これで、 <code>capabilities</code> オブジェクトを更新して、プロジェクト名を含めることができます。閉じ中括弧の前に以下の行を追加し、前の行の終わりにカンマを追加することを忘れないでください（BrowserStack オートメーションダッシュボードの異なるウィンドウでテストを整理するために、ビルド名とプロジェクト名を変えることができます）。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>project: "DuckDuckGo test 2"; </code></pre></div> </li> <li> <p>次に、現在のセッションの <code>sessionId</code> にアクセスして、リクエストをどこに送ればよいかを知る必要があります（後で説明するように、この ID はリクエスト URL に記載されます）。以下の行を <code>driver</code> オブジェクトを作成するブロック（<code>const driver = new Builder()</code> で始まるもの）のすぐ下に記載してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let sessionId; let bstackURL; driver.session_.then((sessionData) => { sessionId = sessionData.id_; bstackURL = `https://${capabilities["bstack:options"].userName}:${capabilities["bstack:options"].accessKey}@www.browserstack.com/automate/sessions/${sessionId}.json`; }); </code></pre></div> </li> <li> <p>最後に、コードの下部付近にある <code>if ... else</code> ブロックを更新し、検査が成功したか失敗したかに応じて適切な API 呼び出しを BrowserStack に送信するようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (title === "webdriver at DuckDuckGo") { console.log("Test passed"); axios.put(bstackURL, { status: "passed", reason: "DuckDuckGo results showed correct title", }); } else { console.log("Test failed"); axios.put(bstackURL, { status: "failed", reason: "DuckDuckGo results showed wrong title", }); } </code></pre></div> </li> </ol> <p>テストが完全に完了すると、 API を BrowserStack に呼び出して、テストの合格、不合格、結果の理由を更新します。</p> <p>これで <a href="https://automate.browserstack.com/dashboard" class="external" target="_blank">BrowserStack Automate dashboard</a> ページに戻ると、以前と同じように、更新されたデータが添付されたテストセッションが利用できるはずです。</p> <p><img src="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/bstack_custom_results.png" alt="BrowserStack Custom Results" width="1000" height="546" loading="lazy"></p></div></section><section aria-labelledby="sauce_labs"><h3 id="sauce_labs"><a href="#sauce_labs">Sauce Labs</a></h3><div class="section-content"><p>Selenium テストを Sauce Labs 上でリモートで実行する方法の例を見ていきましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリー内に、 <code>sauce_google_test.js</code> という新しいファイルを作成します。</p> </li> <li> <p>中身を次のようにします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const { Builder, By, Key } = require("selenium-webdriver"); const username = "YOUR-USER-NAME"; const accessKey = "YOUR-ACCESS-KEY"; const driver = new Builder() .withCapabilities({ browserName: "chrome", platform: "Windows XP", version: "43.0", username, accessKey, }) .usingServer( `https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`, ) .build(); driver.get("http://www.google.com"); driver.findElement(By.name("q")).sendKeys("webdriver"); driver.sleep(1000).then(() => { driver.findElement(By.name("q")).sendKeys(Key.TAB); }); driver.findElement(By.name("btnK")).click(); driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { console.log("Test passed"); } else { console.log("Test failed"); } }); }); driver.quit(); </code></pre></div> </li> <li> <p><a href="https://app.saucelabs.com/user-settings" class="external" target="_blank">Sauce Labs user settings</a> から、ユーザー名とアクセシブルキーを取得します。コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> プレースホルダーを、実際のユーザー名とアクセスキーの値に置き換えます（そして、それらを安全に保つようにしてください）。</p> </li> <li> <p>以下のコマンドでテストを実行します。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node sauce_google_test </code></pre></div> <p>テストは Sauce Labs に送信され、テスト結果はコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p> </li> <li> <p>これで <a href="https://app.saucelabs.com/dashboard/tests" class="external" target="_blank">Sauce Labs Automated Test dashboard</a> のページに行くと、テストが掲載されています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。 <img src="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/sauce_labs_automated_test.png" alt="Sauce Labs automated test" width="1216" height="250" loading="lazy"></p> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> Sauce Labs の <a href="https://saucelabs.com/platform/platform-configurator#/" class="external" target="_blank">Platform Configurator</a> は、テストしたいブラウザー/OS に基づいて、ドライバーインスタンスに供給するケイパビリティオブジェクトを生成する有益なツールです。</p> </div> <div class="notecard note"> <p><strong>メモ:</strong> Sauce Labs と Selenium を使用したテストに関する有益な詳細については、 <a href="https://docs.saucelabs.com/web-apps/automated-testing/selenium/" class="external" target="_blank">Getting Started with Selenium for Automated Website Testing</a> と <a href="https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs" class="external" target="_blank">Instant Selenium Node.js Tests</a> を調べてください。</p> </div> <h4 id="sauce_labs_テストの詳細をプログラムで書き込む">Sauce Labs テストの詳細をプログラムで書き込む</h4> <p>Sauce Labs API を使用することで、合格したかどうか、テストの名前など、テストの詳細をアノテーションすることができます。 Sauce Labs は既定ではこれらの詳細を知りません。</p> <p>これを行うには、次のようにする必要があります。</p> <ol> <li> <p>以下のコマンドを使用して Node Sauce Labs ラッパーをインストールします（まだ自分のプロジェクトで使用していない場合）。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install saucelabs --save-dev </code></pre></div> </li> <li> <p>saucelabs が必要です。 <code>sauce_google_test.js</code> ファイルの一番上、前回宣言した変数のすぐ下記に記述してください。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const SauceLabs = require("saucelabs"); </code></pre></div> </li> <li> <p>SauceLabs の新しいインスタンスを作成し、そのすぐ下に従うことで以下を追加します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const saucelabs = new SauceLabs({ username: "YOUR-USER-NAME", password: "YOUR-ACCESS-KEY", }); </code></pre></div> <p>再度、コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> のプレースホルダーを実際のユーザー名とアクセスキーの値に置き換えてください（saucelabs npm パッケージでは <code>password</code> を使用しており、<code>accessKey</code> ではないことに注意してください）。これで 2 回使用することになるので、これらを格納するためにヘルパー変数をいくつか作成しておくとよいでしょう。</p> </li> <li> <p><code>driver</code> 変数を定義したブロックの下記（<code>build()</code> 行のすぐ下）に、以下のブロックを追加してください。これはジョブにデータを書き込むために必要な正しいドライバー <code>sessionID</code> を取得します（次のコードブロックでその動作を見ることができます）。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>driver.getSession().then((sessionid) => { driver.sessionID = sessionid.id_; }); </code></pre></div> </li> <li> <p>最後に、コードの一番下にある <code>driver.sleep(2000)</code> ブロックを以下に置き換えます。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>driver.sleep(2000).then(() => { driver.getTitle().then((title) => { let testPassed = false; if (title === "webdriver - Google Search") { console.log("Test passed"); testPassed = true; } else { console.error("Test failed"); } saucelabs.updateJob(driver.sessionID, { name: "Google search results page title test", passed: testPassed, }); }); }); </code></pre></div> </li> </ol> <p>ここでは、テストの合格と不合格に応じて <code>testPassed</code> 変数を <code>true</code> または <code>false</code> に設定し、 <code>saucelabs.updateJob()</code> メソッドを使用して詳細を更新しています。</p> <p>これで <a href="https://app.saucelabs.com/dashboard/tests" class="external" target="_blank">Sauce Labs Automated Test dashboard</a> ページに戻ると、新しいジョブに更新されたデータが添付されていることが確認できるはずです。</p> <p><img src="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/sauce_labs_updated_job_info.png" alt="Sauce Labs Updated Job info" width="1088" height="150" loading="lazy"></p></div></section><section aria-labelledby="自身のリモートサーバー"><h3 id="自身のリモートサーバー"><a href="#自身のリモートサーバー">自身のリモートサーバー</a></h3><div class="section-content"><p>Sauce Labs や BrowserStack のようなサービスを使用したくない場合は、常に自分自身でリモートテストサーバーを設定することができます。その方法を見ていきましょう。</p> <ol> <li> <p>Selenium リモートサーバーを実行するには Java が必要です。 <a href="https://www.oracle.com/java/technologies/downloads/" class="external" target="_blank">Java SE downloads page</a> から、自分のプラットフォームに合った最新の JDK をダウンロードしてください。ダウンロードしたらインストールしてください。</p> </li> <li> <p>次に、最新の <a href="https://selenium-release.storage.googleapis.com/index.html" class="external" target="_blank">Selenium スタンドアロンサーバー</a>をダウンロードしてください。これはスクリプトとブラウザードライバーの間のプロキシーとして機能します。最新の安定版（ベータ版ではない）を選び、リストから "selenium-server-standalone" で始まるファイルを選んでください。ダウンロードしたら、ホームディレクトリーのような適切な場所に配置してください。まだ <code>PATH</code> に追加していない場合は、これで追加してください（<a href="#node_で_selenium_のセットアップ">Node で Selenium を設定する</a>の節を参照）。</p> </li> <li> <p>サーバーコンピューターの端末に従うことで、スタンドアロンサーバーを実行します。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>java -jar selenium-server-standalone-3.0.0.jar </code></pre></div> <p>(<code>.jar</code> ファイル名を更新して) 取得したファイルと正確に照合してください。</p> </li> <li> <p>サーバーは <code>http://localhost:4444/wd/hub</code> で動作します。これで、何が取得されるか試してみてください。</p> </li> </ol> <p>これでサーバーを実行したので、リモートの selenium サーバーで動作するデモテストを作成してみましょう。</p> <ol> <li> <p><code>google_test.js</code> ファイルのコピーを作成し、 <code>google_test_remote.js</code> と名付け、自分のプロジェクトディレクトリーに置きます。</p> </li> <li> <p>コードの行（<code>const driver = …</code> で始まる行）を次のように更新します。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const driver = new Builder() .forBrowser(Browser.FIREFOX) .usingServer("http://localhost:4444/wd/hub") .build(); </code></pre></div> </li> <li> <p>テストを実行すると、期待通りに実行されるはずです。ただし、今回はスタンドアロンサーバー上で動作させます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node google_test_remote.js </code></pre></div> </li> </ol> <p>これはかなりクールです。私たちはこれをローカルでテストしましたが、関連するブラウザードライバと一緒にあらゆるサーバーに設定し、公開する URL を使用してスクリプトを接続することができます。</p></div></section><section aria-labelledby="selenium_と_ci_ツールのインテグレーション"><h2 id="selenium_と_ci_ツールのインテグレーション"><a href="#selenium_と_ci_ツールのインテグレーション">Selenium と CI ツールのインテグレーション</a></h2><div class="section-content"><p>別の点として、 Selenium と LambdaTest や Sauce Labs のような関連ツールを継続的インテグレーション（CI）ツールと統合することも可能です。これは、 CI ツールを介してテストを実行し、テストが合格した場合にのみ新しい変更をコードリポジトリーにコミットできることを意味しているので便利です。</p> <p>この記事でこの分野を詳しく見ていくのは範囲外ですが、 Travis CI で始めることを提案します - これはおそらく最も簡単に取得できるCIツールであり、 GitHub や Node のようなウェブツールとの統合もあります。</p> <p>始めるには、例えば次のものを見てください。</p> <ul> <li><a href="https://docs.travis-ci.com/user/for-beginners" class="external" target="_blank">Travis CI for complete beginners</a></li> <li><a href="https://docs.travis-ci.com/user/languages/javascript-with-nodejs/" class="external" target="_blank">Building a Node.js project</a> (with Travis)</li> <li><a href="https://www.lambdatest.com/support/docs/travis-ci-with-lambdatest/" class="external" target="_blank">Using LambdaTest with Travis CI</a></li> <li><a href="https://www.lambdatest.com/support/docs/circleci-integration-with-lambdatest/" class="external" target="_blank">Using LambdaTest with CircleCI</a></li> <li><a href="https://www.lambdatest.com/support/docs/jenkins-with-lambdatest/" class="external" target="_blank">Using LambdaTest with Jenkins</a></li> <li><a href="https://docs.travis-ci.com/user/sauce-connect/" class="external" target="_blank">Using Sauce Labs with Travis CI</a></li> </ul> <div class="notecard note"> <p><strong>メモ:</strong> <strong>コードレス自動化</strong>で継続的なテストを行いたい場合は、 <a href="https://www.endtest.io" class="external" target="_blank">Endtest</a> や <a href="https://testingbot.com" class="external" target="_blank">TestingBot</a> を使用することができます。</p> </div></div></section><section aria-labelledby="まとめ"><h2 id="まとめ"><a href="#まとめ">まとめ</a></h2><div class="section-content"><p>このモジュールは楽しいもので、自分自身で自動テストを書いて取得するのに十分な、自動テストの書き方や実行方法に関する知識が得られたことでしょう。</p> <ul class="prev-next"><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing"><span class="button-wrap"> 前のページ </span></a></li><li><a class="button secondary" href="/ja/docs/Learn_web_development/Extensions/Testing"><span class="button-wrap"> Overview: テスト</span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2025-02-16T03:19:35.000Z">2025年2月16日</time> by <a href="/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/extensions/testing/your_own_automation_environment/index.md?plain=1" title="Folder: ja/learn_web_development/extensions/testing/your_own_automation_environment (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-ja.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FYour_own_automation_environment&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60ja%2Flearn_web_development%2Fextensions%2Ftesting%2Fyour_own_automation_environment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FYour_own_automation_environment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn_web_development%2Fextensions%2Ftesting%2Fyour_own_automation_environment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F5da3d2d21c7af2d41422b872a3a2c7b3cd48f398%0A*+Document+last+modified%3A+2025-02-16T03%3A19%3A35.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/ja/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/ja/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Testing\"><span class=\"button-wrap\"> Overview: テスト</span></a></li></ul>\n<p>この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提条件:</th>\n <td>\n <a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">HTML</a>、<a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS</a>、<a href=\"/ja/docs/Learn_web_development/Core/Scripting\">JavaScript</a> 言語の主要部に通じていること。\n <a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Introduction\">ブラウザー横断テストの基本</a>および<a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自動化テスト</a>について高水準の考えを持っていること。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目標:</th>\n <td>\n Selenium によるローカルテスト環境のセットアップ方法や Selenium を使用したテストの実行方法、Sauce Labs や BrowserStack などのツールとの統合する方法の案内。\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"selenium","title":"Selenium","isH3":false,"content":"<p><a href=\"https://www.selenium.dev/\" class=\"external\" target=\"_blank\">Selenium</a> は最も人気のあるブラウザー自動化ツールです。他の方法もありますが、 Selenium を使用する最良の方法は WebDriver を使用することで、強力な API で Selenium 上に構築し、ブラウザーを呼び出して自動化し、「このウェブページを開く」、「この要素をページ上に移動する」、「このリンクをクリックする」、「リンクがこの URL を開くかどうかを確認する」などといったアクションを実行します。これは、自動テストを実行するのに最適です。</p>\n<p>WebDriver のインストール方法と使用方法は、テストの作成と実行に使用するプログラミング環境によって異なります。最も一般的な環境では、WebDriver とその言語、例えば Java、C＃、Ruby、Python、JavaScript (Node) などを使用して WebDriver と通信するのに必要なバインディングをインストールするパッケージまたはフレームワークが利用可能です。異なる言語の Selenium のセットアップの詳細については、 <a href=\"https://www.selenium.dev/documentation/webdriver/getting_started/\" class=\"external\" target=\"_blank\">Setting Up a Selenium-WebDriver Project</a> を参照してください。</p>\n<p>異なるブラウザーでは、WebDriver と通信して制御するために異なるドライバーが必要です。ブラウザーのドライバーの入手先などについては、 <a href=\"https://www.selenium.dev/downloads/\" class=\"external\" target=\"_blank\">Platforms Supported by Selenium</a> を参照してください。</p>\n<p>Node.js を使用した Selenium テストの作成と実行については、始める前にすばやく簡単に行うことができ、フロントエンド開発者にはもっと使い慣れた環境を提供する予定です。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n他のサーバーサイド環境で WebDriver を使用する方法を知りたい場合は、 <a href=\"https://www.selenium.dev/downloads/\" class=\"external\" target=\"_blank\">Platforms Supported by Selenium</a> もチェックしてください。</p>\n</div>"}},{"type":"prose","value":{"id":"node_で_selenium_のセットアップ","title":"Node で Selenium のセットアップ","isH3":true,"content":"<ol>\n<li>\n<p>まず、前章の <a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing#node_と_npm_の設定\">Node と npm の設定</a> で説明しているように、新しい npm プロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</p>\n</li>\n<li>\n<p>次に、 Node の内部から Selenium が機能するようにフレームワークをインストールする必要があります。更新頻度が高く、よく改善されるため、 <a href=\"https://www.npmjs.com/package/selenium-webdriver\" class=\"external\" target=\"_blank\">selenium-webdriver</a> を選択します。もしも他の選択をするならば <a href=\"https://webdriver.io/\" class=\"external\" target=\"_blank\">webdriver.io</a> と <a href=\"https://nightwatchjs.org/\" class=\"external\" target=\"_blank\">nightwatch.js</a> もいい選択です。selenium-webdriver をインストールするため, プロジェクトフォルダーの下で以下のコマンドを走らせます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install selenium-webdriver\n</code></pre></div>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n以前に selenium-webdriver をインストールしてブラウザードライバーをダウンロードした場合でも、これらの手順を実行することをお勧めします。すべてが最新であることを確認する必要があります。</p>\n</div>\n<p>次に、 WebDriver がテストしたいブラウザーを制御するために、関連するドライバーをダウンロードする必要があります。どこから取得するかは、 <a href=\"https://www.npmjs.com/package/selenium-webdriver\" class=\"external\" target=\"_blank\">selenium-webdriver</a> ページに詳細があります（最初の節の表を見てください）。もちろん、いくつかのブラウザーは OS 固有のものですが、主要な OS で利用できる Firefox と Chrome に絞って説明します。</p>\n<ol>\n<li>最新の <a href=\"https://github.com/mozilla/geckodriver/releases/\" class=\"external\" target=\"_blank\">GeckoDriver</a> （Firefox 用）と <a href=\"https://googlechromelabs.github.io/chrome-for-testing/#stable\" class=\"external\" target=\"_blank\">ChromeDriver</a> ドライバーをダウンロードします。</li>\n<li>ホームユーザーディレクトリーのルートなど、移動しやすい場所に展開します。</li>\n<li><code>chromedriver</code> と <code>geckodriver</code> ドライバーの場所をシステムの <code>PATH</code> 変数に追加してください。これは、ハードディスクのルートから、ドライバーを格納するディレクトリーへの絶対パスでなければなりません。例えば、macOS マシンを使用していて、ユーザー名が bob で、ドライバーをホームフォルダーのルートに置くとしたら、パスは <code>/Users/bob</code> となります。</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nもう一度言っておきますが、 <code>PATH</code> に追加するパスは、ドライバーそのものへのパスではなく、ドライバーを格納するディレクトリーへのパスである必要があります。これはよく間違えられます。</p>\n</div>\n<p>macOS システムとほとんどの Linux システムで <code>PATH</code> 変数を設定するには、次のようにします。</p>\n<ol>\n<li>\n<p><code>.zprofile</code> （または <code>bash</code> シェルを使用している場合はまだ <code>bash_profile</code> を開きます。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\n隠しファイルが表示されていない場合は表示させる必要があります。 <a href=\"https://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/\" class=\"external\" target=\"_blank\">Show/Hide hidden files in macOS</a> または <a href=\"https://askubuntu.com/questions/470837/how-to-show-hidden-folders-in-file-manager-nautilus-on-ubuntu\" class=\"external\" target=\"_blank\">Show hidden folders in Ubuntu</a> を参照してください。</p>\n</div>\n</li>\n<li>\n<p>ファイルの一番下に以下を貼り付けます（パスはあなたのマシンで実際に使用されているものに更新してください）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>#Add WebDriver browser drivers to PATH\nexport PATH=$PATH:/Users/bob\n</code></pre></div>\n</li>\n<li>\n<p>このファイルを保存して閉じてから、端末/コマンドプロンプトを再起動して Bash 設定を再適用します。</p>\n</li>\n<li>\n<p>新しいパスが <code>PATH</code> 変数に入っているか、端末に以下のように入力して調べます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>echo $PATH\n</code></pre></div>\n<p>端末に表示されるはずです。</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nWindows で <code>PATH</code> 変数を設定するには、<a href=\"https://www.itprotoday.com/\" class=\"external\" target=\"_blank\">How can I add a new folder to my system path?</a> の指示に従ってください。</p>\n</div>\n<p>すべてが動作していることを確認するために、簡単なテストをしてみましょう。</p>\n<ol>\n<li>\n<p>自分のプロジェクトディレクトリーに <code>duck_test.js</code> と呼ばれる新しいファイルを作成します。</p>\n</li>\n<li>\n<p>そのファイルに以下のコンテンツを追加し、保存します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, Key, until } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n try {\n await driver.get(\"https://duckduckgo.com/\");\n await driver.findElement(By.name(\"q\")).sendKeys(\"webdriver\", Key.RETURN);\n await driver.wait(until.titleIs(\"webdriver at DuckDuckGo\"), 1000);\n console.log(\"Test passed!\");\n } catch (e) {\n console.log(`Error: ${e}`);\n } finally {\n await driver.sleep(2000); // 検索ページが見えるように待つ\n await driver.quit();\n }\n})();\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nこの関数は <a href=\"/ja/docs/Glossary/IIFE\">IIFE</a> （即時実行関数式）です。</p>\n</div>\n</li>\n<li>\n<p>端末で、自分のプロジェクトフォルダー内にいることを確認し、以下のコマンドを入力します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node duck_test\n</code></pre></div>\n</li>\n</ol>\n<p>Firefox のインスタンスが自動的に開くのが確認できるはずです。 Google が自動的にタブに読み込まれ、検索ボックスに \"webdriver\" と入力され、検索ボタンがクリックされます。その後、 WebDriver は 1 秒待ちます。文書タイトルがアクセスされ、 \"webdriver at DuckDuckGo\" であれば、テストが合格したとメッセージを返します。</p>\n<p>それから 2 秒待ち、 WebDriver は Firefox インスタンスを閉じて、停止します。</p>"}},{"type":"prose","value":{"id":"一度に複数ブラウザーでテストする","title":"一度に複数ブラウザーでテストする","isH3":false,"content":"<p>複数のブラウザーで同時にテストを実行することを妨げるものは何もありません。試してみましょう。</p>\n<ol>\n<li>\n<p>自分のプロジェクトのディレクトリーに、 <code>duck_test_multiple.js</code> と呼ばれる新しいファイルを作成します。どのブラウザーが利用できるか応じて、追加した他のブラウザーへの参照を自由に変更したり、削除したりしてください。正しいブラウザードライバーを設定する必要があります。他のブラウザーのために <code>.forBrowser()</code> メソッド内で使用する文字列に関しては、 <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/global.html#Browser\" class=\"external\" target=\"_blank\">Browser enum</a> のリファレンスページを参照してください。</p>\n</li>\n<li>\n<p>以下の内容を記述し、保存してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, Key } = require(\"selenium-webdriver\");\n\nconst driver_fx = new Builder().forBrowser(Browser.FIREFOX).build();\nconst driver_chr = new Builder().forBrowser(Browser.CHROME).build();\n\nasync function searchTest(driver) {\n try {\n await driver.get(\"https://duckduckgo.com/\");\n await driver.findElement(By.name(\"q\")).sendKeys(\"webdriver\", Key.RETURN);\n await driver.sleep(2000);\n const title = await driver.getTitle();\n if (title === \"webdriver at DuckDuckGo\") {\n console.log(\"Test passed\");\n } else {\n console.log(\"Test failed\");\n }\n } finally {\n driver.quit();\n }\n}\n\nsearchTest(driver_fx);\nsearchTest(driver_chr);\n</code></pre></div>\n</li>\n<li>\n<p>端末で、自分のプロジェクトフォルダー内にいることを確認し、以下のコマンドを入力してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node duck_test_multiple\n</code></pre></div>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nもし Mac を使用していて Safari をテストしようとすると、エラーメッセージ \"Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver.\" が表示されるかもしれません。これが表示された場合は、指定された指示に従ってもう一度試してください。</p>\n<p>ドライバーアプリが検証済みのソースからダウンロードされていないため、開くことができないというメッセージが表示される場合があります。これが出た場合、そのドライバアプリに対してのみセキュリティ設定を上書きすることができます。例えば、 Mac では、 <kbd>Ctrl</kbd> キーを押しながらアプリをクリックし、「開く」を選び、表示されるダイアログボックスで再度「開く」を選ぶことができます。</p>\n</div>\n<p>ここで、今回は <code>searchTest()</code> という関数の中にラップしたことを除いて、前と同じようにテストを行いました。複数のブラウザー用に新しいブラウザーインスタンスを作成し、それぞれを関数に渡すことで、 3 つのブラウザーすべてでテストが実行されるようにしています。</p>\n<p>楽しいですか？それでは次に、 WebDriver の構文の基本をもう少し詳しく見ていきましょう。</p>"}},{"type":"prose","value":{"id":"webdriver_構文速習コース","title":"WebDriver 構文速習コース","isH3":false,"content":"<p>webdriver 構文のいくつかの主要な機能を見ていきましょう。完全に詳細を知りたい場合は、<a href=\"https://www.selenium.dev/selenium/docs/api/javascript/\" class=\"external\" target=\"_blank\">selenium-webdriver JavaScript API reference</a> を参照してください。また、 Selenium main documentation の <a href=\"https://www.selenium.dev/documentation/webdriver/\" class=\"external\" target=\"_blank\">Selenium WebDriver</a> には、様々な言語で書かれた複数の例が格納されています。</p>"}},{"type":"prose","value":{"id":"新しいテストを始める","title":"新しいテストを始める","isH3":true,"content":"<p>新しいテストを始めるには、 <code>selenium-webdriver</code> モジュールを記載し、<code>Builder</code> コンストラクターと <code>Browser</code> インターフェイスをインポートする必要があります。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser } = require(\"selenium-webdriver\");\n</code></pre></div>\n<p><code>Builder()</code> コンストラクターを使用して新しいドライバーのインスタンスを作成し、 <code>forBrowser()</code> メソッドを連結して、このビルダーでテストしたいブラウザーを指定します。\n最後に <code>build()</code> メソッドを連結して、実際にドライバのインスタンスを構築します（これらの機能の詳細情報は <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/Builder.html\" class=\"external\" target=\"_blank\">Builder クラスリファレンス</a> を参照してください）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let driver = new Builder().forBrowser(Browser.FIREFOX).build();\n</code></pre></div>\n<p>なお、テストするブラウザーに固有の構成オプションを設定することは可能です。例えば、 <code>forBrowser()</code>　メソッドで、テストする特定のバージョンとOSを設定することができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let driver = new Builder().forBrowser(Browser.FIREFOX, \"130\", \"MAC\").build();\n</code></pre></div>\n<p>例えば、環境変数を使ってこれらのオプションを設定することもできます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>SELENIUM_BROWSER=firefox:130:MAC\n</code></pre></div>\n<p>新しいテストを作成して、このコードを調べながら話を進めましょう。自分の selenium test プロジェクトディレクトリー内に、 <code>quick_test.js</code> と呼ばれる新しいファイルを作成し、以下のコードを追加してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n})();\n</code></pre></div>\n<p>端末に次のコマンドを入力して、この例をテストすることができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node quick_test\n</code></pre></div>"}},{"type":"prose","value":{"id":"テストする文書の取得","title":"テストする文書の取得","isH3":true,"content":"<p>実際にテストしたいページを読み込むには、例えば先ほど作成したドライバーのインスタンスの <code>get()</code> メソッドを使用します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>driver.get(\"http://www.google.com\");\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nこの章とその下記の機能の詳細については、<a href=\"https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html\" class=\"external\" target=\"_blank\">WebDriver クラスリファレンス</a>を参照してください。</p>\n</div>\n<p>リソースを指す URL であればなんでも使用することができます。ローカル文書をテストするためには <code>file://</code> URL を含めることもできます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>driver.get(\"file:///Users/bob/git/examples/test_file.html\");\n</code></pre></div>\n<p>または</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>driver.get(\"http://localhost:8888/test_file.html\");\n</code></pre></div>\n<p>しかし、リモートサーバーの場所を使用したほうがコードの柔軟性が高まります。リモートサーバーを使用してテストを実行し始める際には（後述します）、ローカルパスを使用しようとするとコードが壊れてしまいます。</p>\n<p><code>example()</code> 関数を以下のように更新し、プレースホルダーのパスを、自分のコンピュータ上の実際の HTML ファイルへのローカルパスに置き換えてください。その後、実行してみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\"file:///Users/bob/git/examples/test_file.html\");\n})();\n</code></pre></div>"}},{"type":"prose","value":{"id":"文書とのやりとり","title":"文書とのやりとり","isH3":true,"content":"<p>これでテストする文書を取得したので、何か文書内で操作する必要があります。通常、最初にテストする固有の要素を選択する必要があります。 WebDriver では、ID、クラス、要素名などで<a href=\"https://www.selenium.dev/documentation/webdriver/elements/\" class=\"external\" target=\"_blank\">多くの方法で UI 要素を選択する</a>ことができます。実際の選択は <code>findElement()</code> メソッドによって行われ、このメソッドは引数として選択メソッドを受け入れます。例えば、ID によって要素を選択するには、次のようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const element = driver.findElement(By.id(\"myElementId\"));\n</code></pre></div>\n<p>CSSで要素を探す最も有益な方法の 1 つである <code>By.css()</code> メソッドを使用すると、 CSS セレクターを使用して要素を選択することができます。</p>\n<p>これで <code>example()</code> 関数を以下のように更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n const button = driver.findElement(By.css(\"button:nth-of-type(1)\"));\n})();\n</code></pre></div>"}},{"type":"prose","value":{"id":"要素のテスト","title":"要素のテスト","isH3":true,"content":"<p>ウェブ文書や文書内の要素を対話する方法はたくさんあります。 WebDriver ドキュメントの<a href=\"https://www.selenium.dev/documentation/webdriver/elements/information/#text-content\" class=\"external\" target=\"_blank\">テキスト値を取得する</a>から始まる一般的な例を見ることができます。</p>\n<p>ボタンの中のテキストを取得したい場合、次のようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>button.getText().then((text) => {\n console.log(`Button text is '${text}'`);\n});\n</code></pre></div>\n<p>下記の通り、これで <code>example()</code> 関数の末尾にこの例を追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const button = driver.findElement(By.css(\"button:nth-of-type(1)\"));\n\n button.getText().then((text) => {\n console.log(`Button text is '${text}'`);\n });\n})();\n</code></pre></div>\n<p><code>node</code> を使用して、以前と同じように例を実行してください。コンソール内に、ボタンのテキストラベルが表示されるはずです。</p>\n<p>もう少し有益なことをしてみましょう。前回のコード項目を下記のように <code>button.click();</code> という行に置き換えてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const button = driver.findElement(By.css(\"button:nth-of-type(1)\"));\n\n button.click();\n})();\n</code></pre></div>\n<p>ボタンがクリックされ、 <code>alert()</code> ポップアップが現れるはずです。少なくともボタンが動作していることがわかります。</p>\n<p>ポップアップを操作することもできます。 <code>example()</code> 関数を以下のように更新して、もう一度テストしてみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, until } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const button = driver.findElement(By.css(\"button:nth-of-type(1)\"));\n\n button.click();\n\n await driver.wait(until.alertIsPresent());\n\n const alert = driver.switchTo().alert();\n\n alert.getText().then((text) => {\n console.log(`Alert text is '${text}'`);\n });\n\n alert.accept();\n})();\n</code></pre></div>\n<p>次に、フォーム要素のひとつにテキストを入力してみましょう。 <code>example()</code> 関数を以下のように更新して、もう一度テストを実行してみましょう。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, Key } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const input = driver.findElement(By.id(\"name\"));\n input.sendKeys(\"Bob Smith\");\n\n input.sendKeys(Key.TAB);\n\n const input2 = driver.findElement(By.id(\"age\"));\n input2.sendKeys(\"65\");\n})();\n</code></pre></div>\n<p><code>Key</code> オブジェクトのプロパティを使用して、通常の文字で表せないキーを送信することができます。例えば、上ではフォーム入力を送信する前にタブで抜けるためにこの構文を使用しました。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>input.sendKeys(Key.TAB);\n</code></pre></div>"}},{"type":"prose","value":{"id":"何かが完了するのを待つ","title":"何かが完了するのを待つ","isH3":true,"content":"<p>WebDriver が何かを完了するまで待ってからテストを行いたい時があります。例えば新しいページを読み込んだ場合、ページの DOM の読み込みが完了するまで待ってから要素を操作する必要があり、そうしないとテストが失敗する可能性が高くなります。</p>\n<p>例えばこの例の <code>duck_test_multiple.js</code> テストでは、次のようなブロックを含んでいます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>await driver.sleep(2000);\n</code></pre></div>\n<p><code>sleep()</code> メソッドにはミリ秒単位で待つ時間を指定する値を受け入れます。このメソッドはその時間の終わりに解決するプロミスを返し、この時点で <code>then()</code> 内のコードが実行されます。このケースでは <code>getTitle()</code> メソッドで現在のページのタイトルを取得し、その返値に応じて合格か不合格かを返しています。</p>\n<p><code>quick_test.js</code> のテストにも <code>sleep()</code> メソッドを追加することができます。 <code>example()</code> 関数をこの例のように更新してみてください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, Key } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const input = driver.findElement(By.id(\"name\"));\n input.sendKeys(\"Bob Smith\");\n\n driver.sleep(1000).then(() => {\n input.getAttribute(\"value\").then((value) => {\n if (value !== \"\") {\n console.log(\"Form input filled out\");\n } else {\n console.log(\"Text could not be entered\");\n }\n });\n });\n})();\n</code></pre></div>\n<p>これで WebDriver はフォームフィールドを形成する前に 2 秒間待機します。そして、 <code>getAttribute()</code> を使用して <code>value</code> 属性値を取得して値が埋まっているかどうか（空でないかどうか）を検査し、空でなければコンソールにメッセージを出力します。</p>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nまた、 <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait\" class=\"external\" target=\"_blank\"><code>wait()</code></a> と呼ばれるメソッドがあります。これは、ある条件を一定時間繰り返しテストし、コードの実行を継続します。これも <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html\" class=\"external\" target=\"_blank\">util ライブラリー</a>を使用しています。 util ライブラリーは <code>wait()</code> とともに使用する一般的な条件を定義しています。</p>\n</div>"}},{"type":"prose","value":{"id":"使用後のドライバーのシャットダウン","title":"使用後のドライバーのシャットダウン","isH3":true,"content":"<p>テストの実行が完了したら、 <code>driver.quit()</code> メソッドを使用して開いたドライバインスタンスをすべてシャットダウンし、不必要なリソースを使用したままにしないようにする必要があります。 <code>quick_test.js</code> を以下のように更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, Browser, By, Key } = require(\"selenium-webdriver\");\n\n(async function example() {\n const driver = await new Builder().forBrowser(Browser.FIREFOX).build();\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n const input = driver.findElement(By.id(\"name\"));\n input.sendKeys(\"Bob Smith\");\n\n driver.sleep(1000).then(() => {\n input\n .getAttribute(\"value\")\n .then((value) => {\n if (value !== \"\") {\n console.log(\"Form input filled out\");\n } else {\n console.log(\"Text could not be entered\");\n }\n })\n .finally(() => {\n driver.quit();\n });\n });\n})();\n</code></pre></div>\n<p>これで実行すると、テストが実行され、テスト完了後にブラウザーインスタンスがシャットダウンされます。</p>"}},{"type":"prose","value":{"id":"テストのベストプラクティス","title":"テストのベストプラクティス","isH3":false,"content":"<p>テストを書くための最善の手法については、これまで多くのことが書かれてきました。<a href=\"https://www.selenium.dev/documentation/test_practices/\" class=\"external\" target=\"_blank\">テストプラクティス</a>を参照ください。一般的には、あなたのテストが次のようなものであることを確認すべきです。</p>\n<ol>\n<li>良いロケーター戦略を用いること。<a href=\"#文書とのやりとり\">文書とのやりとり</a>のときには、ロケーターとページオブジェクトが変更されにくいものを使用するようにしましょう。テストを実行したいテスト可能な要素がある場合、次のサイトの反復処理で変更されることのない、安定した ID や CSS セレクターで選択できるページ上の位置を持つようにしましょう。テストは可能な限りもろくならないように、つまり、何かが変わっても壊れないようにしたいものです。</li>\n<li>アトミックなテストを書きます。各テストはひとつのことだけをテストするようにし、どのテストファイルがどの基準をテストしているのかを簡単に把握できるようにします。例えば、上で見た <code>duck_test.js</code> のテストは、検索結果ページのタイトルが正しく設定されているかどうかという単一のことをテストするだけなので、とても良いものです。このテストにもっと良い名前をつけて、テストを追加したときに、このテストが何をするのかがわかりやすいようにすることもできます。おそらく、 <code>results_page_title_set_correctly.js</code> が少し良いでしょうか？</li>\n<li>自律的なテストコードを書きましょう。各テストは自分自身で動作し、他のテストに依存して動作しないようにしましょう。</li>\n</ol>\n<p>さらに、テスト結果/報告についても言及すべきでしょう。上記の例では単純な <code>console.log()</code> 文を使って結果を報告していますが、これはすべて JavaScript で行っているため、 <a href=\"https://mochajs.org/\" class=\"external\" target=\"_blank\">Mocha</a> や <a href=\"https://www.chaijs.com/\" class=\"external\" target=\"_blank\">Chai</a>、他にも好きなテスト実行・報告システムを使用することができます。</p>\n<ol>\n<li>\n<p>例えば、 <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/selenium/mocha_test.js\" class=\"external\" target=\"_blank\"><code>mocha_test.js</code></a> のローカルコピーを自分のプロジェクトディレクトリー内に作ってみてください。それを <code>test</code> というサブフォルダーに入れてください。この例では長いプロミスの連鎖を使用して、テストに必要なすべての段階を実行しています - WebDriver が使用するプロミスベースのメソッドは正しく作業するために解決する必要があります。</p>\n</li>\n<li>\n<p>自分のプロジェクトディレクトリーで以下のコマンドを実行して、 mocha テストハーネスをインストールします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev mocha\n</code></pre></div>\n</li>\n<li>\n<p>これで、以下のコマンドを用いてテストを実行（および <code>test</code> ディレクトリーに置いた他のテストも実行）することができます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx mocha --no-timeouts\n</code></pre></div>\n</li>\n<li>\n<p>Mocha の任意のタイムアウト（3 秒）のためにテストが失敗してしまうことがないように、<code>--no-timeouts</code> フラグを記載する必要があります。</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <a href=\"https://github.com/saucelabs-sample-test-frameworks\" class=\"external\" target=\"_blank\">saucelabs-sample-test-frameworks</a> には、テスト/アサーションツールのさまざまな組み合わせを設定する方法を示す有益な例がいくつか含まれています。</p>\n</div>"}},{"type":"prose","value":{"id":"リモートテストの実行","title":"リモートテストの実行","isH3":false,"content":"<p>リモートサーバー上でテストを実行するのは、ローカルで実行するよりもそれほど難しくないことがわかりました。ドライバーのインスタンスを作成するだけですが、テストしたいブラウザーに必要な機能、サーバーのアドレス、アクセスするために必要なユーザー資格情報（もしあれば）をいくつか指定します。</p>"}},{"type":"prose","value":{"id":"browserstack","title":"BrowserStack","isH3":true,"content":"<p>BrowserStack で Selenium テストをリモートで動作するようにする方法の例を作成してみましょう。</p>\n<ol>\n<li>\n<p>自分のプロジェクトディレクトリーに、 <code>bstack_duck_test.js</code> という新しいファイルを作成します。</p>\n</li>\n<li>\n<p>内容を以下のようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, By, Key } = require(\"selenium-webdriver\");\n\n// Input capabilities\nconst capabilities = {\n \"bstack:options\": {\n os: \"OS X\",\n osVersion: \"Sonoma\",\n browserVersion: \"17.0\",\n local: \"false\",\n seleniumVersion: \"3.14.0\",\n userName: \"YOUR-USER-NAME\",\n accessKey: \"YOUR-ACCESS-KEY\",\n },\n browserName: \"Safari\",\n};\n\nconst driver = new Builder()\n .usingServer(\"http://hub-cloud.browserstack.com/wd/hub\")\n .withCapabilities(capabilities)\n .build();\n\n(async function bStackGoogleTest() {\n try {\n await driver.get(\"https://duckduckgo.com/\");\n await driver.findElement(By.name(\"q\")).sendKeys(\"webdriver\", Key.RETURN);\n await driver.sleep(2000);\n const title = await driver.getTitle();\n if (title === \"webdriver at DuckDuckGo\") {\n console.log(\"Test passed\");\n } else {\n console.log(\"Test failed\");\n }\n } finally {\n await driver.sleep(4000); // Delay long enough to see search page!\n await driver.quit();\n }\n})();\n</code></pre></div>\n</li>\n<li>\n<p><a href=\"https://www.browserstack.com/accounts/profile/details\" class=\"external\" target=\"_blank\">Account & Profile details page</a> から、ユーザー名とアクセシビリティキーを取得します（<em>Username and Access Keys</em> 参照）。コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> プレースホルダーを、実際のユーザー名とアクセスキーの値に置き換えてください（そして、それらを安全に保管してください）。</p>\n</li>\n<li>\n<p>以下のコマンドでテストを実行します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node bstack_duck_test\n</code></pre></div>\n<p>テストは BrowserStack に送信され、テスト結果がコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p>\n</li>\n<li>\n<p>これで、 <a href=\"https://automate.browserstack.com/dashboard/\" class=\"external\" target=\"_blank\">BrowserStack Automate dashboard</a> のページに戻ると、テストの一覧が表示され、テストを録画した動画や、テストに関する複数の詳細なログ情報などの詳細を見ることができます。\n<img src=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/bstack_automated_results.png\" alt=\"BrowserStack automated results\" width=\"1000\" height=\"504\" loading=\"lazy\"></p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nBrowserstack 自動化ダッシュボードの <em>Resources</em> メニューオプションには、自動テストを実行するために使用するための有益な情報が豊富に格納されています。ノード固有の情報については、 <a href=\"https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs\" class=\"external\" target=\"_blank\">Selenium with NodeJS</a> を参照してください。</p>\n</div>\n<h4 id=\"プログラムによる_browserstack_テストの詳細の入力\">プログラムによる BrowserStack テストの詳細の入力</h4>\n<p>BrowserStack REST API や他にもいくつかの機能を使用して、自分のテストに、合格したかどうか、合格した理由、テストがどのプロジェクトの一部であるかなどの詳細をアノテーションすることができます。 BrowserStack は既定ではこれらの詳細を知りません！</p>\n<p>それでは、 <code>bstack_duck_test.js</code> デモを更新して、これらがどのように動作するのかを示してみましょう。</p>\n<ol>\n<li>\n<p><a href=\"https://www.npmjs.com/package/axios\" class=\"external\" target=\"_blank\">axios</a> モジュールをインストールするために、プロジェクトのディレクトリーから次のコマンドを実行します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>npm install axios\n</code></pre></div>\n</li>\n<li>\n<p>axios モジュールをインポートして、 BrowserStack の REST API にリクエストを送信することができるようにします。コードの一番上に以下の行を追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const axios = require(\"axios\");\n</code></pre></div>\n</li>\n<li>\n<p>これで、 <code>capabilities</code> オブジェクトを更新して、プロジェクト名を含めることができます。閉じ中括弧の前に以下の行を追加し、前の行の終わりにカンマを追加することを忘れないでください（BrowserStack オートメーションダッシュボードの異なるウィンドウでテストを整理するために、ビルド名とプロジェクト名を変えることができます）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>project: \"DuckDuckGo test 2\";\n</code></pre></div>\n</li>\n<li>\n<p>次に、現在のセッションの <code>sessionId</code> にアクセスして、リクエストをどこに送ればよいかを知る必要があります（後で説明するように、この ID はリクエスト URL に記載されます）。以下の行を <code>driver</code> オブジェクトを作成するブロック（<code>const driver = new Builder()</code> で始まるもの）のすぐ下に記載してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let sessionId;\nlet bstackURL;\n\ndriver.session_.then((sessionData) => {\n sessionId = sessionData.id_;\n bstackURL = `https://${capabilities[\"bstack:options\"].userName}:${capabilities[\"bstack:options\"].accessKey}@www.browserstack.com/automate/sessions/${sessionId}.json`;\n});\n</code></pre></div>\n</li>\n<li>\n<p>最後に、コードの下部付近にある <code>if ... else</code> ブロックを更新し、検査が成功したか失敗したかに応じて適切な API 呼び出しを BrowserStack に送信するようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (title === \"webdriver at DuckDuckGo\") {\n console.log(\"Test passed\");\n axios.put(bstackURL, {\n status: \"passed\",\n reason: \"DuckDuckGo results showed correct title\",\n });\n} else {\n console.log(\"Test failed\");\n axios.put(bstackURL, {\n status: \"failed\",\n reason: \"DuckDuckGo results showed wrong title\",\n });\n}\n</code></pre></div>\n</li>\n</ol>\n<p>テストが完全に完了すると、 API を BrowserStack に呼び出して、テストの合格、不合格、結果の理由を更新します。</p>\n<p>これで <a href=\"https://automate.browserstack.com/dashboard\" class=\"external\" target=\"_blank\">BrowserStack Automate dashboard</a> ページに戻ると、以前と同じように、更新されたデータが添付されたテストセッションが利用できるはずです。</p>\n<p><img src=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/bstack_custom_results.png\" alt=\"BrowserStack Custom Results\" width=\"1000\" height=\"546\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"sauce_labs","title":"Sauce Labs","isH3":true,"content":"<p>Selenium テストを Sauce Labs 上でリモートで実行する方法の例を見ていきましょう。</p>\n<ol>\n<li>\n<p>自分のプロジェクトディレクトリー内に、 <code>sauce_google_test.js</code> という新しいファイルを作成します。</p>\n</li>\n<li>\n<p>中身を次のようにします。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const { Builder, By, Key } = require(\"selenium-webdriver\");\nconst username = \"YOUR-USER-NAME\";\nconst accessKey = \"YOUR-ACCESS-KEY\";\n\nconst driver = new Builder()\n .withCapabilities({\n browserName: \"chrome\",\n platform: \"Windows XP\",\n version: \"43.0\",\n username,\n accessKey,\n })\n .usingServer(\n `https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`,\n )\n .build();\n\ndriver.get(\"http://www.google.com\");\n\ndriver.findElement(By.name(\"q\")).sendKeys(\"webdriver\");\n\ndriver.sleep(1000).then(() => {\n driver.findElement(By.name(\"q\")).sendKeys(Key.TAB);\n});\n\ndriver.findElement(By.name(\"btnK\")).click();\n\ndriver.sleep(2000).then(() => {\n driver.getTitle().then((title) => {\n if (title === \"webdriver - Google Search\") {\n console.log(\"Test passed\");\n } else {\n console.log(\"Test failed\");\n }\n });\n});\n\ndriver.quit();\n</code></pre></div>\n</li>\n<li>\n<p><a href=\"https://app.saucelabs.com/user-settings\" class=\"external\" target=\"_blank\">Sauce Labs user settings</a> から、ユーザー名とアクセシブルキーを取得します。コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> プレースホルダーを、実際のユーザー名とアクセスキーの値に置き換えます（そして、それらを安全に保つようにしてください）。</p>\n</li>\n<li>\n<p>以下のコマンドでテストを実行します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node sauce_google_test\n</code></pre></div>\n<p>テストは Sauce Labs に送信され、テスト結果はコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p>\n</li>\n<li>\n<p>これで <a href=\"https://app.saucelabs.com/dashboard/tests\" class=\"external\" target=\"_blank\">Sauce Labs Automated Test dashboard</a> のページに行くと、テストが掲載されています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。\n<img src=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/sauce_labs_automated_test.png\" alt=\"Sauce Labs automated test\" width=\"1216\" height=\"250\" loading=\"lazy\"></p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nSauce Labs の <a href=\"https://saucelabs.com/platform/platform-configurator#/\" class=\"external\" target=\"_blank\">Platform Configurator</a> は、テストしたいブラウザー/OS に基づいて、ドライバーインスタンスに供給するケイパビリティオブジェクトを生成する有益なツールです。</p>\n</div>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong>\nSauce Labs と Selenium を使用したテストに関する有益な詳細については、 <a href=\"https://docs.saucelabs.com/web-apps/automated-testing/selenium/\" class=\"external\" target=\"_blank\">Getting Started with Selenium for Automated Website Testing</a> と <a href=\"https://docs.saucelabs.com/web-apps/automated-testing/selenium/sample-scripts/#nodejs\" class=\"external\" target=\"_blank\">Instant Selenium Node.js Tests</a> を調べてください。</p>\n</div>\n<h4 id=\"sauce_labs_テストの詳細をプログラムで書き込む\">Sauce Labs テストの詳細をプログラムで書き込む</h4>\n<p>Sauce Labs API を使用することで、合格したかどうか、テストの名前など、テストの詳細をアノテーションすることができます。 Sauce Labs は既定ではこれらの詳細を知りません。</p>\n<p>これを行うには、次のようにする必要があります。</p>\n<ol>\n<li>\n<p>以下のコマンドを使用して Node Sauce Labs ラッパーをインストールします（まだ自分のプロジェクトで使用していない場合）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install saucelabs --save-dev\n</code></pre></div>\n</li>\n<li>\n<p>saucelabs が必要です。 <code>sauce_google_test.js</code> ファイルの一番上、前回宣言した変数のすぐ下記に記述してください。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const SauceLabs = require(\"saucelabs\");\n</code></pre></div>\n</li>\n<li>\n<p>SauceLabs の新しいインスタンスを作成し、そのすぐ下に従うことで以下を追加します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const saucelabs = new SauceLabs({\n username: \"YOUR-USER-NAME\",\n password: \"YOUR-ACCESS-KEY\",\n});\n</code></pre></div>\n<p>再度、コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</code> のプレースホルダーを実際のユーザー名とアクセスキーの値に置き換えてください（saucelabs npm パッケージでは <code>password</code> を使用しており、<code>accessKey</code> ではないことに注意してください）。これで 2 回使用することになるので、これらを格納するためにヘルパー変数をいくつか作成しておくとよいでしょう。</p>\n</li>\n<li>\n<p><code>driver</code> 変数を定義したブロックの下記（<code>build()</code> 行のすぐ下）に、以下のブロックを追加してください。これはジョブにデータを書き込むために必要な正しいドライバー <code>sessionID</code> を取得します（次のコードブロックでその動作を見ることができます）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>driver.getSession().then((sessionid) => {\n driver.sessionID = sessionid.id_;\n});\n</code></pre></div>\n</li>\n<li>\n<p>最後に、コードの一番下にある <code>driver.sleep(2000)</code> ブロックを以下に置き換えます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>driver.sleep(2000).then(() => {\n driver.getTitle().then((title) => {\n let testPassed = false;\n if (title === \"webdriver - Google Search\") {\n console.log(\"Test passed\");\n testPassed = true;\n } else {\n console.error(\"Test failed\");\n }\n\n saucelabs.updateJob(driver.sessionID, {\n name: \"Google search results page title test\",\n passed: testPassed,\n });\n });\n});\n</code></pre></div>\n</li>\n</ol>\n<p>ここでは、テストの合格と不合格に応じて <code>testPassed</code> 変数を <code>true</code> または <code>false</code> に設定し、 <code>saucelabs.updateJob()</code> メソッドを使用して詳細を更新しています。</p>\n<p>これで <a href=\"https://app.saucelabs.com/dashboard/tests\" class=\"external\" target=\"_blank\">Sauce Labs Automated Test dashboard</a> ページに戻ると、新しいジョブに更新されたデータが添付されていることが確認できるはずです。</p>\n<p><img src=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment/sauce_labs_updated_job_info.png\" alt=\"Sauce Labs Updated Job info\" width=\"1088\" height=\"150\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"自身のリモートサーバー","title":"自身のリモートサーバー","isH3":true,"content":"<p>Sauce Labs や BrowserStack のようなサービスを使用したくない場合は、常に自分自身でリモートテストサーバーを設定することができます。その方法を見ていきましょう。</p>\n<ol>\n<li>\n<p>Selenium リモートサーバーを実行するには Java が必要です。 <a href=\"https://www.oracle.com/java/technologies/downloads/\" class=\"external\" target=\"_blank\">Java SE downloads page</a> から、自分のプラットフォームに合った最新の JDK をダウンロードしてください。ダウンロードしたらインストールしてください。</p>\n</li>\n<li>\n<p>次に、最新の <a href=\"https://selenium-release.storage.googleapis.com/index.html\" class=\"external\" target=\"_blank\">Selenium スタンドアロンサーバー</a>をダウンロードしてください。これはスクリプトとブラウザードライバーの間のプロキシーとして機能します。最新の安定版（ベータ版ではない）を選び、リストから \"selenium-server-standalone\" で始まるファイルを選んでください。ダウンロードしたら、ホームディレクトリーのような適切な場所に配置してください。まだ <code>PATH</code> に追加していない場合は、これで追加してください（<a href=\"#node_で_selenium_のセットアップ\">Node で Selenium を設定する</a>の節を参照）。</p>\n</li>\n<li>\n<p>サーバーコンピューターの端末に従うことで、スタンドアロンサーバーを実行します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>java -jar selenium-server-standalone-3.0.0.jar\n</code></pre></div>\n<p>(<code>.jar</code> ファイル名を更新して) 取得したファイルと正確に照合してください。</p>\n</li>\n<li>\n<p>サーバーは <code>http://localhost:4444/wd/hub</code> で動作します。これで、何が取得されるか試してみてください。</p>\n</li>\n</ol>\n<p>これでサーバーを実行したので、リモートの selenium サーバーで動作するデモテストを作成してみましょう。</p>\n<ol>\n<li>\n<p><code>google_test.js</code> ファイルのコピーを作成し、 <code>google_test_remote.js</code> と名付け、自分のプロジェクトディレクトリーに置きます。</p>\n</li>\n<li>\n<p>コードの行（<code>const driver = …</code> で始まる行）を次のように更新します。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const driver = new Builder()\n .forBrowser(Browser.FIREFOX)\n .usingServer(\"http://localhost:4444/wd/hub\")\n .build();\n</code></pre></div>\n</li>\n<li>\n<p>テストを実行すると、期待通りに実行されるはずです。ただし、今回はスタンドアロンサーバー上で動作させます。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node google_test_remote.js\n</code></pre></div>\n</li>\n</ol>\n<p>これはかなりクールです。私たちはこれをローカルでテストしましたが、関連するブラウザードライバと一緒にあらゆるサーバーに設定し、公開する URL を使用してスクリプトを接続することができます。</p>"}},{"type":"prose","value":{"id":"selenium_と_ci_ツールのインテグレーション","title":"Selenium と CI ツールのインテグレーション","isH3":false,"content":"<p>別の点として、 Selenium と LambdaTest や Sauce Labs のような関連ツールを継続的インテグレーション（CI）ツールと統合することも可能です。これは、 CI ツールを介してテストを実行し、テストが合格した場合にのみ新しい変更をコードリポジトリーにコミットできることを意味しているので便利です。</p>\n<p>この記事でこの分野を詳しく見ていくのは範囲外ですが、 Travis CI で始めることを提案します - これはおそらく最も簡単に取得できるCIツールであり、 GitHub や Node のようなウェブツールとの統合もあります。</p>\n<p>始めるには、例えば次のものを見てください。</p>\n<ul>\n<li><a href=\"https://docs.travis-ci.com/user/for-beginners\" class=\"external\" target=\"_blank\">Travis CI for complete beginners</a></li>\n<li><a href=\"https://docs.travis-ci.com/user/languages/javascript-with-nodejs/\" class=\"external\" target=\"_blank\">Building a Node.js project</a> (with Travis)</li>\n<li><a href=\"https://www.lambdatest.com/support/docs/travis-ci-with-lambdatest/\" class=\"external\" target=\"_blank\">Using LambdaTest with Travis CI</a></li>\n<li><a href=\"https://www.lambdatest.com/support/docs/circleci-integration-with-lambdatest/\" class=\"external\" target=\"_blank\">Using LambdaTest with CircleCI</a></li>\n<li><a href=\"https://www.lambdatest.com/support/docs/jenkins-with-lambdatest/\" class=\"external\" target=\"_blank\">Using LambdaTest with Jenkins</a></li>\n<li><a href=\"https://docs.travis-ci.com/user/sauce-connect/\" class=\"external\" target=\"_blank\">Using Sauce Labs with Travis CI</a></li>\n</ul>\n<div class=\"notecard note\">\n<p><strong>メモ:</strong> <strong>コードレス自動化</strong>で継続的なテストを行いたい場合は、 <a href=\"https://www.endtest.io\" class=\"external\" target=\"_blank\">Endtest</a> や <a href=\"https://testingbot.com\" class=\"external\" target=\"_blank\">TestingBot</a> を使用することができます。</p>\n</div>"}},{"type":"prose","value":{"id":"まとめ","title":"まとめ","isH3":false,"content":"<p>このモジュールは楽しいもので、自分自身で自動テストを書いて取得するのに十分な、自動テストの書き方や実行方法に関する知識が得られたことでしょう。</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\"><span class=\"button-wrap\"> 前のページ </span></a></li><li><a class=\"button secondary\" href=\"/ja/docs/Learn_web_development/Extensions/Testing\"><span class=\"button-wrap\"> Overview: テスト</span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ja","mdn_url":"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment","modified":"2025-02-16T03:19:35.000Z","native":"日本語","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Setting up your own test automation environment","native":"English (US)"},{"locale":"de","title":"Einrichtung Ihrer eigenen Testautomatisierungsumgebung","native":"Deutsch"},{"locale":"zh-CN","title":"搭建自己的自动化测试环境","native":"中文 (简体)"}],"pageTitle":"テスト自動化環境のセットアップ - ウェブ開発の学習 | MDN","parents":[{"uri":"/ja/docs/Learn_web_development","title":"ウェブ開発の学習"},{"uri":"/ja/docs/Learn_web_development/Extensions","title":"発展モジュール"},{"uri":"/ja/docs/Learn_web_development/Extensions/Testing","title":"テスト"},{"uri":"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment","title":"テスト自動化環境のセットアップ"}],"popularity":null,"short_title":"テスト自動化環境のセットアップ","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Getting_started\">Getting started modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup\">Environment setup</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">ウェブの閲覧</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">コードエディター</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">コマンドライン短期集中講座</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website\">Your first website</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: コンテンツの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: コンテンツのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: 操作の追加</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">ウェブサイトの公開</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards\">Web standards</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">ウェブのしくみ</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">ウェブ標準モデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">ブラウザーがウェブサイトを読み込む仕組み</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills\">Soft skills</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">調査と学習</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">共同作業とチームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">ワークフローとプロセス</a></li><li><a href=\"/ja/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">面接で成功するために</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Core\">Core modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content\">Structuring content with HTML</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">基本的な HTML の構文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">ヘッド部には何が入る? ウェブページのメタデータ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML の見出しと段落</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">強調と重要性</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Lists\">リスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">高度なテキスト装飾</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Creating_links\">リンクの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">課題: 手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">課題: コンテンツのページの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表のアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">課題: 惑星データの構造化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">HTML におけるフォームとボタン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML のデバッグ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics\">CSS styling basics</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">課題: 経歴ページのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">基本的な CSS セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">競合の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Sizing\">CSS におけるアイテムのサイズ設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Overflow\">コンテンツのオーバーフロー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">課題: 基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">課題: 美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">課題: かっこいいボックス</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Text_styling\">CSS text styling</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_lists\">リストのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">課題: コミュニティスクールのホームページの組版</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout\">CSS レイアウト</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS グリッドレイアウト</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries\">メディアクエリーの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">課題: 基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Scripting\">Dynamic scripting with JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">課題: バカ話ジェネレーター</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Conditionals\">コードでの意思決定 — 条件文</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Loops\">ループするコード</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Image_gallery\">課題: イメージギャラリー</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM スクリプティング入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Network_requests\">ネットワークリクエストを JavaScript で作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">JavaScript のデバッグとエラー処理</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript frameworks and libraries</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">フレームワークの主な機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">React で ToDo リストを始める</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">React アプリのコンポーネント化</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React での操作の実装: イベントと状態</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">React での操作の実装: 編集、絞り込み、条件付きレンダリング</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">React でのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React のリソース</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Core/Accessibility\">Accessibility</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Tooling\">アクセシビリティツールと支援技術</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Core/Design_for_developers\">Design for developers</a></li><li><a href=\"/ja/docs/Learn_web_development/Core/Version_control\">Version control</a></li><li class=\"section\"><a href=\"/ja/docs/Learn_web_development/Extensions\">Extension modules</a></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">練習: バウンスボールのデモに機能を追加する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs\">クライアントサイド Web API</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">クライアント側ストレージ</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">サードパーティ API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS\">非同期 JavaScript</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">課題: アニメーションを順番に再生する</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Forms\">ウェブフォーム — ユーザーデータの操作</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Form_validation\">クライアント側のフォーム検証</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools\">Understanding client-side tools</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side\">Server-side websites</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps\">Server-side first steps</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django\">Django ウェブフレームワーク (Python)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Models\" class=\"only-in-en-us\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\" class=\"only-in-en-us\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\" class=\"only-in-en-us\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\" class=\"only-in-en-us\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\" class=\"only-in-en-us\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\" class=\"only-in-en-us\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Forms\" class=\"only-in-en-us\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Testing\" class=\"only-in-en-us\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\" class=\"only-in-en-us\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\" class=\"only-in-en-us\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\" class=\"only-in-en-us\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web framework (Node.js)</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\" class=\"only-in-en-us\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\" class=\"only-in-en-us\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Performance\">Web performance</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/ja/docs/Learn_web_development/Extensions/Testing\">Testing</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">一般的な HTML と CSS の問題の処理</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自動化テストの紹介</a></li><li><em><a href=\"/ja/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\" aria-current=\"page\">テスト自動化環境のセットアップ</a></em></li></ol></details></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Transform_animate\">Transform and animate CSS</a></li><li><a href=\"/ja/docs/Learn_web_development/Extensions/Security_privacy\">Security and privacy</a></li><li class=\"section\">その他のリソース</li><li class=\"toggle\"><details><summary><a href=\"/ja/docs/Learn_web_development/Howto\">How to solve common problems</a></summary><ol><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_HTML_problems\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_CSS_problems\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn_web_development/Howto/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">About</a></li><li><a href=\"/ja/docs/Learn_web_development/Educators\">Resources for educators</a></li><li><a href=\"/ja/docs/Learn_web_development/Changelog\">Changelog</a></li></ol>","source":{"folder":"ja/learn_web_development/extensions/testing/your_own_automation_environment","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn_web_development/extensions/testing/your_own_automation_environment/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/5da3d2d21c7af2d41422b872a3a2c7b3cd48f398","filename":"index.md"},"summary":"この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。","title":"テスト自動化環境のセットアップ","toc":[{"text":"Selenium","id":"selenium"},{"text":"一度に複数ブラウザーでテストする","id":"一度に複数ブラウザーでテストする"},{"text":"WebDriver 構文速習コース","id":"webdriver_構文速習コース"},{"text":"テストのベストプラクティス","id":"テストのベストプラクティス"},{"text":"リモートテストの実行","id":"リモートテストの実行"},{"text":"Selenium と CI ツールのインテグレーション","id":"selenium_と_ci_ツールのインテグレーション"},{"text":"まとめ","id":"まとめ"}],"pageType":"learn-module-chapter"}}</script></body></html>