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="Einrichten Ihrer eigenen Testautomatisierungsumgebung" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment" hrefLang="de"/><link rel="alternate" title="Setting up your own test automation environment" href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment" hrefLang="en"/><link rel="alternate" title="搭建自己的自动化测试环境" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment" hrefLang="zh"/><link rel="alternate" title="テスト自動化環境のセットアップ" href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_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/Tools_and_testing/Cross_browser_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/Tools_and_testing/Cross_browser_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.95536068.js"></script><link href="/static/css/main.959b5ea9.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="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="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/ja/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/ja/docs/Learn" 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" 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/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">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/ja/docs/Learn/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">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/ja/docs/Learn/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">Learn to run scripts in the browser</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">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%2FTools_and_testing%2FCross_browser_testing%2FYour_own_automation_environment" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fja%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%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" 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/Tools_and_testing" 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/Tools_and_testing/Cross_browser_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/Tools_and_testing/Cross_browser_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="de" href="/de/docs/Learn/Tools_and_testing/Cross_browser_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="en-US" href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_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" data-macro="LearnSidebar"><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/Getting_started_with_the_web">完全な初心者はこちらから!</a></li><li><details><summary>ウェブ入門</summary><ol><li><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li><li><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/HTML">HTML — ウェブの構造化</a></li><li><details><summary>HTML概論</summary><ol><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ヘッド部には何が入る? HTML のメタデータ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高度なテキスト整形</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書とウェブサイトの構造</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙のマークアップ</a></li><li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツのページの構造化</a></li></ol></details></li><li><details><summary>マルチメディアと埋め込み</summary><ol><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">object から iframe まで — その他の埋め込み技術</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブへのベクターグラフィックの追加</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li><li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li></ol></details></li><li><details><summary>HTML 表</summary><ol><li><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li><li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">惑星データの構造化</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/CSS">CSS — ウェブのスタイル設定</a></li><li><details><summary>CSS の第一歩</summary><ol><li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか</a></li><li><a href="/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page">経歴ページのスタイル設定</a></li></ol></details></li><li><details><summary>CSS の構成要素</summary><ol><li><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素型、クラス、ID セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケード、詳細度、継承</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_layers">カスケードレイヤー</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界線</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキストの様々な方向の扱い</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のオーバーフロー</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度な効果</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的な CSS の理解</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">美しいレターヘッド付きの便箋の作成</a></li><li><a href="/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box">かっこいいボックス</a></li></ol></details></li><li><details><summary>テキストの装飾</summary><ol><li><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントのスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクのスタイル設定</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li><li><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li></ol></details></li><li><details><summary>CSS レイアウト</summary><ol><li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動ボックス</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーの対応</a></li><li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/JavaScript">JavaScript — 動的クライアントサイドスクリプト</a></li><li><details><summary>JavaScript の第一歩</summary><ol><li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript とは</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript の最初の一歩</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保管する — 変数</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での基本演算 — 数値と演算子</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストの扱い — JavaScript での文字列</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li><li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">バカ話ジェネレーター</a></li></ol></details></li><li><details><summary>JavaScript の構成要素</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループするコード</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の返値</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベント入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Event_bubbling">イベントのバブリング</a></li><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li></ol></details></li><li><details><summary>JavaScript オブジェクトの紹介</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトのプロトタイプ</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_programming">オブジェクト指向プログラミング</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">JavaScript のクラス</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON の操作</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト構築の練習</a></li><li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモに機能を追加する</a></li></ol></details></li><li><details><summary>非同期 JavaScript</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">非同期 JavaScript 入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">プロミスの使い方</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">プロミスベースの API の実装方法</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing_workers">ワーカー入門</a></li><li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">アニメーションを順番に再生する</a></li></ol></details></li><li><details><summary>クライアントサイド Web API</summary><ol><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド Web API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文書の操作</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバーからのデータ取得</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li><li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータの操作</a></li><li><details><summary>ウェブフォームの構成要素</summary><ol><li><a href="/ja/docs/Learn/Forms">ウェブフォームの構成要素</a></li><li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li><li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li><li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">基本的なネイティブフォームコントロール</a></li><li><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 の入力型</a></li><li><a href="/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></li><li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームへのスタイル設定</a></li><li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li><li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></li><li><a href="/ja/docs/Learn/Forms/Form_validation">クライアント側のフォーム検証</a></li><li><a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li></ol></details></li><li><details><summary>高度なウェブフォームテクニック</summary><ol><li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li><li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li><li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームコントロール向けの CSS プロパティの互換性一覧表</a></li><li><a href="/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Accessibility">アクセシビリティ — 誰もウェブを利用できるようにする</a></li><li><details><summary>アクセシビリティガイド</summary><ol><li><a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a></li><li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは</a></li><li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの良き基本</a></li><li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li><li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li><li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルのアクセシビリティ</a></li><li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Performance">パフォーマンス — ウェブサイトを高速かつ応答性の高いものにする</a></li><li><details><summary>パフォーマンスガイド</summary><ol><li><a href="/ja/docs/Learn/Performance">ウェブパフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの「なぜ」</a></li><li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは</a></li><li><a href="/ja/docs/Learn/Performance/Perceived_performance">知覚的パフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li><li><a href="/ja/docs/Learn/Performance/Multimedia">マルチメディア: 画像</a></li><li><a href="/ja/docs/Learn/Performance/video">マルチメディア: 動画</a></li><li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript のパフォーマンス</a></li><li><a href="/ja/docs/Learn/Performance/HTML">HTML のパフォーマンス機能</a></li><li><a href="/ja/docs/Learn/Performance/CSS">CSS のパフォーマンス最適化</a></li><li><a href="/ja/docs/Learn/Performance/business_case_for_performance">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/MathML">MathML — MathML を使用して数学を記述する</a></li><li><details><summary>MathML の最初のステップ</summary><ol><li><a href="/ja/docs/Learn/MathML/First_steps">MathML 第一歩の概要</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Getting_started">MathML を始めよう</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Text_containers">MathML テキストコンテナー</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML 分数と根号</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Scripts">MathML 添字要素</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Tables">MathML 表</a></li><li><a href="/ja/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">三大数式</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/../Games">ゲーム — ウェブ用ゲームの開発</a></li><li><details><summary>ガイドとチュートリアル</summary><ol><li><a href="/ja/docs/Games/Introduction">ウェブ用のゲーム開発入門</a></li><li><a href="/ja/docs/Games/Techniques">ゲーム開発テクニック</a></li><li><a href="/ja/docs/Games/Tutorials">チュートリアル</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Games/Publishing_games">Publishing games</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Tools_and_testing">ツールとテスト</a></li><li><details><summary>クライアントサイドウェブ開発ツール</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools">クライアントサイドウェブ開発ツールの理解</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">クライアントサイドツールの概要</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">コマンドライン短期集中講座</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">パッケージ管理の基本</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">完全なツールチェーンの導入</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">アプリのデプロイ</a></li></ol></details></li><li><details><summary>クライアントサイドフレームワークの概要</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">クライアントサイドフレームワークの概要</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">フレームワークの主な機能</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React を始める</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">React ToDoリストをはじめる</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">React アプリのコンポーネント化</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React のリソース</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue refs and lifecycle methods for focus management</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte をはじめる</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte to-do list app</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular をはじめる</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Angular todo リストアプリの事始め</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Angular アプリのスタイリング</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">item コンポーネントの作成</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">To Do アイテムのフィルタリング</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Angular アプリケーションのビルドとその他のリソース</a></li></ol></details></li><li><details><summary>Git と GitHub</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/GitHub">Git と GitHub</a></li></ol></details></li><li><details open=""><summary>ブラウザー横断テスト</summary><ol><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">ブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">はじめてのブラウザー横断テスト</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">テスト実行のための戦略</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">一般的な HTML と CSS の問題への対処</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">よくある JavaScript の問題の扱い</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">よくあるアクセシビリティの問題を扱う</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">機能検出の実装</a></li><li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自動化テストの紹介</a></li><li><em><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment" aria-current="page">テスト自動化環境のセットアップ</a></em></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Server-side">サーバーサイドウェブサイトプログラミング</a></li><li><details><summary>サーバーサイドのウェブサイトプログラミングの第一歩</summary><ol><li><a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント・サーバーの概要</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li><li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li></ol></details></li><li><details><summary>Django ウェブフレームワーク (Python)</summary><ol><li><a href="/ja/docs/Learn/Server-side/Django">Django ウェブフレームワーク (Python)</a></li><li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></li><li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></li><li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">Assessment: DIY Django mini blog</a></li></ol></details></li><li><details><summary>Express ウェブフレームワーク (Node.js/JavaScript)</summary><ol><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express ウェブフレームワーク (Node.js/JavaScript)</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node の紹介</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li><li><a class="only-in-en-us" title="このページは現在、英語のみで利用可能です。" href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li><li class="section"><a href="/ja/docs/Learn/Common_questions">その他のリソース</a></li><li><details><summary>よくある質問</summary><ol><li><a href="/ja/docs/Learn/Common_questions">よくある質問</a></li><li><a href="/ja/docs/Learn/HTML/Howto">HTML を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/JavaScript/Howto">JavaScript のコードのよくある問題を解決する</a></li><li><a href="/ja/docs/Learn/Common_questions/Web_mechanics">ウェブの仕組み</a></li><li><a href="/ja/docs/Learn/Common_questions/Tools_and_setup">ツールとセットアップ</a></li><li><a href="/ja/docs/Learn/Common_questions/Design_and_accessibility">デザインとアクセシビリティ</a></li></ol></details></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/Tools_and_testing/Cross_browser_testing/Automated_testing"><span class="button-wrap"> 前のページ </span></a></li> <li><a class="button secondary" href="/ja/docs/Learn/Tools_and_testing/Cross_browser_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/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語の主要部に通じていること。 <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">ブラウザー横断テストの基本</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/Tools_and_testing/Cross_browser_testing/Automated_testing#node_%E3%81%A8_npm_%E3%81%AE%E8%A8%AD%E5%AE%9A">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://chromedriver.chromium.org/downloads" 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>bash</code> シェルを使用していない場合（例えば、 macOS システムの既定では <code>bash</code> ではなく <code>zsh</code> シェルです）、<code>bash</code> シェルに切り替えます。</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>exec bash </code></pre></div> </li> <li> <p><code>.bash_profile</code>（または <code>.bashrc</code>）ファイルを開きます（隠しファイルが表示されていない場合は表示させる必要があります。 <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> </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> </li> <li> <p>端末に表示されるはずです。</p> </li> </ol> <p>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> <p>では、すべてが動作していることを確認するために、簡単なテストをしてみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリーに <code>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, Browser, By, Key, until } = require("selenium-webdriver"); (async function example() { const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); try { await driver.get("https://www.google.com/ncr"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.wait(until.titleIs("webdriver - Google Search"), 1000); } finally { await driver.sleep(2000); // Delay long enough to see search page! 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 google_test </code></pre></div> </li> </ol> <p> Firefox のインスタンスが自動的に開くのが確認できるはずです。 Google が自動的にタブに読み込まれ、検索ボックスに "webdriver" と入力され、検索ボタンがクリックされます。その後、 WebDriver は 1 秒待ちます。文書タイトルがアクセスされ、 "webdriver - Google Search" であれば、テストが合格したとメッセージを返します。その後 4 秒待ち、 WebDriver は Firefox インスタンスを閉じて、停止します。 </p></div></section><section aria-labelledby="一度に複数ブラウザーでテストする"><h2 id="一度に複数ブラウザーでテストする"><a href="#一度に複数ブラウザーでテストする">一度に複数ブラウザーでテストする</a></h2><div class="section-content"><p>複数のブラウザーで同時にテストを実行することを妨げるものは何もありません。試してみましょう！</p> <ol> <li> <p>自分のプロジェクトのディレクトリーに、 <code>google_test_multiple.js</code> と呼ばれる新しいファイルを作成します。どのブラウザーが利用できるか応じて、追加した他のブラウザーへの参照を自由に変更したり、削除したりしてください。正しいブラウザードライバーを設定する必要があります。他のブラウザーのために <code>.forBrowser()</code> メソッド内で使用する文字列に関しては、 <a href="https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html" 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("http://www.google.com"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.sleep(2000).then(async () => { await driver.getTitle().then(async (title) => { if (title === "webdriver - Google Search") { 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 google_test_multiple </code></pre></div> </li> <li> <p>もしMacを使用していてSafariをテストしようとすると、エラーメッセージ "Could not create a session. "が表示されるかもしれません： WebDriverを使用してSafariを制御するには、SafariのDevelopメニューで'Allow Remote Automation'オプションを有効にする必要があります。これが表示された場合は、指定された指示に従ってもう一度試してください。</p> </li> </ol> <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/module/selenium-webdriver/" 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/module/selenium-webdriver/index_exports_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, "46", "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:46: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></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/module/selenium-webdriver/lib/webdriver_exports_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/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.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/fake-div-buttons.html"); </code></pre></div> <p>しかし、リモートサーバーの場所を使用したほうがコードの柔軟性が高まります。リモートサーバーを使用してテストを実行し始める際には（後述します）、ローカルパスを使用しようとするとコードが壊れてしまいます。</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 } = 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", ); })(); </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>自分のプロジェクトディレクトリー内にいることを確認して、テストを実行してみてください。</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.js </code></pre></div> <p>ボタンのテキストラベルがコンソールに表示されるはずです。</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, 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 input = driver.findElement(By.id("name")); input.sendKeys("Filling in my form"); 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>Key</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(1000).then(() => { driver.findElement(By.name("q")).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>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>driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { console.log("Test passed"); } else { console.log("Test failed"); } }); }); </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, until } = require("selenium-webdriver"); const driver = new Builder().forBrowser("firefox").build(); (async function example() { try { driver.get( "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", ); driver.sleep(2000).then(() => { const input = driver.findElement(By.id("name")); input.sendKeys("Filling in my form"); input.getAttribute("value").then((value) => { if (value !== "") { console.log("Form input editable"); } }); }); 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(); } finally { await driver.sleep(4000); // Delay long enough to see search page! driver.quit(); } })(); </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>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>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="#%E6%96%87%E6%9B%B8%E3%81%A8%E3%81%AE%E3%82%84%E3%82%8A%E3%81%A8%E3%82%8A">文書とのやりとり</a>のときには、ロケーターとページオブジェクトが変更されにくいものを使用するようにしましょう。テストを実行したいテスト可能な要素がある場合、次のサイトの反復処理で変更されることのない、安定した ID や CSS セレクターで選択できるページ上の位置を持つようにしましょう。テストは可能な限りもろくならないように、つまり、何かが変わっても壊れないようにしたいものです。</li> <li>アトミックなテストを書きます。各テストはひとつのことだけをテストするようにし、どのテストファイルがどの基準をテストしているのかを簡単に把握できるようにします。例えば、上で見た <code>google_test.js</code> のテストは、検索結果ページのタイトルが正しく設定されているかどうかという単一のことをテストするだけなので、とても良いものです。このテストにもっと良い名前をつけて、 google のテストを追加したときに、このテストが何をするのかがわかりやすいようにすることもできます。おそらく、 <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="lambdatest"><h3 id="lambdatest"><a href="#lambdatest">LambdaTest</a></h3><div class="section-content"><p>Selenium テストを LambdaTest 上でリモート動作させるのはとても簡単です。必要なコードは下記パターンに従ってください。</p> <p>例を書いてみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリーに、 <code>lambdatest_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 { By, Builder } = require("selenium-webdriver"); // username: Username can be found at automation dashboard const USERNAME = "{username}"; // AccessKey: AccessKey can be generated from automation dashboard or profile section const KEY = "{accessKey}"; // gridUrl: gridUrl can be found at automation dashboard const GRID_HOST = "hub.lambdatest.com/wd/hub"; function searchTextOnGoogle() { // Setup Input capabilities const capabilities = { platform: "windows 10", browserName: "chrome", version: "67.0", resolution: "1280x800", network: true, visual: true, console: true, video: true, name: "Test 1", // name of the test build: "NodeJS build", // name of the build }; // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`; // setup and build selenium driver object const driver = new Builder() .usingServer(gridUrl) .withCapabilities(capabilities) .build(); // navigate to a URL, search for a text and get title of page driver.get("https://www.google.com/ncr").then(function () { driver .findElement(By.name("q")) .sendKeys("LambdaTest\n") .then(function () { driver.getTitle().then((title) => { setTimeout(() => { if (title === "LambdaTest - Google Search") { driver.executeScript("lambda-status=passed"); } else { driver.executeScript("lambda-status=failed"); } driver.quit(); }, 5000); }); }); }); } searchTextOnGoogle(); </code></pre></div> </li> <li> <p><a href="https://www.lambdatest.com/selenium-automation" class="external" target="_blank">LambdaTest automation dashboard</a> にアクセスし、右上の <strong>key</strong> アイコンをクリックして LambdaTest のユーザー名とアクセスキーを取得します（<em>Username and Access Keys</em> 参照）。コード内の <code>{username}</code> と <code>{accessKey}</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 lambdatest_google_test </code></pre></div> <p> テストは LambdaTest に送信され、テストの出力は LambdaTest コンソールに反映されます。これらの結果を LambdaTest プラットフォームからレポート目的で抽出したい場合は、 <a href="https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/" class="external" target="_blank">LambdaTest restful API</a> を使用することができます。 </p> </li> <li> <p> これで <a href="https://accounts.lambdatest.com/dashboard" class="external" target="_blank">LambdaTest Automation dashboard</a> に行くと、テストが載っています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。また、 <code>if</code> や <code>else</code> のコードブロックがあるため、ステータスが <strong>completed</strong> ではなく、 <strong>passed</strong> や <strong>failed</strong> と表示されます。 </p> <p> <a href="https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg" class="external" target="_blank"><img src="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/automation-logs-1.jpg" alt="LambdaTest Automation Dashboard" width="1600" height="758" loading="lazy"></a> テストビルド内のすべてのテストについて、ネットワーク、コマンド、例外、Selenium ログを取得できます。また、Selenium スクリプトの実行を録画した動画も探すことができます。 </p> </li> </ol> <div class="notecard note"> <p><strong>メモ:</strong> LambdaTest Automation Dashboard の <em>HELP</em> ボタンをクリックすると、LambdaTest オートメーションを始めるには十分な情報が提供されます。また、<a href="https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/" class="external" target="_blank">Node JS で最初の Selenium スクリプトを実行する</a>ことに関する私たちの文書化にも対応しています。</p> </div> <div class="notecard note"> <p><strong>メモ:</strong> テストのためのケイパビリティオブジェクトを手で書きたくない場合は、 <a href="https://www.lambdatest.com/capabilities-generator/" class="external" target="_blank">Selenium Desired Capabilities Generator</a> を用いて生成することができます。</p> </div></div></section><section aria-labelledby="browserstack"><h3 id="browserstack"><a href="#browserstack">BrowserStack</a></h3><div class="section-content"><p>BrowserStack で Selenium テストをリモートで動作するように取得するのは簡単です。必要なコードは下記パターンに従うことです。</p> <p>例を書いてみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリーに、 <code>bstack_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 request = require("request"); // 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://www.google.com/"); await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); await driver.sleep(2000); const title = await driver.getTitle(); if (title === "webdriver - Google Search") { 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">BrowserStack Account - Summary</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_google_test </code></pre></div> <p>テストは BrowserStack に送信され、テスト結果がコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p> </li> <li> <p> これで、 <a href="https://www.browserstack.com/automate" class="external" target="_blank">BrowserStack automation dashboard</a> のページに戻ると、テストが掲載されています。 <img src="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/bstack_automated_results.png" alt="BrowserStack automated results" width="1000" height="504" loading="lazy"> </p> </li> </ol> <p>テストのリンクをクリックすると、新しい画面が取得され、テストの録画動画や、テストに関連する複数の詳細なログ情報を見ることができます。</p> <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">Node JS Documentation for writing automate test scripts in Node JS</a> を参照してください。 BrowserStack で使用することができますすべての有益なことを見つけるために、ドキュメントを探索してください。</p> </div> <div class="notecard note"> <p><strong>メモ:</strong> テストのためのケイパビリティオブジェクトを手で書きたくなければ、ドキュメントにあるジェネレーターを使用して生成することができます。 <a href="https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test" class="external" target="_blank">Run your first test</a> を参照ください。</p> </div> <h4 id="プログラムによる_browserstack_テストの詳細の入力">プログラムによる BrowserStack テストの詳細の入力</h4> <p>BrowserStack REST API や他にもいくつかの機能を使用して、自分のテストに、合格したかどうか、合格した理由、テストがどのプロジェクトの一部であるかなどの詳細をアノテーションすることができます。 BrowserStack は既定ではこれらの詳細を知りません！</p> <p>それでは、 <code>bstack_google_test.js</code> デモを更新して、これらがどのように動作するのかを示してみましょう。</p> <ol> <li> <p>自分のプロジェクトディレクトリー内で次のコマンドを実行することで、リクエストモジュールをインストールします。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>npm install request </code></pre></div> </li> <li> <p>次に、 node request モジュールをインポートして、 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 request = require("request"); </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' : 'Google test 2' </code></pre></div> </li> <li> <p>次に、現在のセッションの <code>sessionId</code> にアクセスして、リクエストをどこに送ればよいかを知る必要があります（後で説明するように、この ID はリクエスト URL に記載されます）。以下の行を <code>driver</code> オブジェクトを作成するブロック (<code>let driver …</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; driver.session_.then((sessionData) => { sessionId = sessionData.id_; }); </code></pre></div> </li> <li> <p>最後に、コードの一番下にある <code>driver.sleep(2000)</code> ブロックを更新して、 REST API 呼び出しを追加します（この場合も、コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-KEY</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) => { if (title === "webdriver - Google Search") { console.log("Test passed"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", form: { status: "passed", reason: "Google results showed correct title", }, }); } else { console.log("Test failed"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", form: { status: "failed", reason: "Google results showed wrong title", }, }); } }); }); </code></pre></div> </li> </ol> <p>テストが完全に完了すると、 API を BrowserStack に呼び出して、テストの合格、不合格、結果の理由を更新します。</p> <p>これで <a href="https://live.browserstack.com/dashboard" class="external" target="_blank">BrowserStack automation dashboard</a> ページに戻ると、以前と同じように、更新されたデータが添付されたテストセッションが利用できるはずです。</p> <p> <img src="/ja/docs/Learn/Tools_and_testing/Cross_browser_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>Sauce Labs 上で Selenium テストをリモートで実行するための取得もとても単純で、いくつかの構文の違いはあるものの、 BrowserStack と非常によく似ています。必要なコードは下記パターンのようになります。</p> <p>例を書いてみましょう。</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/Tools_and_testing/Cross_browser_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/Tools_and_testing/Cross_browser_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_%E3%81%A7_selenium_%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97">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://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/Tools_and_testing/Cross_browser_testing/Automated_testing"><span class="button-wrap"> 前のページ </span></a></li> <li><a class="button secondary" href="/ja/docs/Learn/Tools_and_testing/Cross_browser_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="2024-07-28T14:16:48.000Z">2024年7月28日</time> by <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_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/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md?plain=1" title="Folder: ja/learn/tools_and_testing/cross_browser_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%2FTools_and_testing%2FCross_browser_testing%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%2Ftools_and_testing%2Fcross_browser_testing%2Fyour_own_automation_environment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FYour_own_automation_environment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fja%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Fyour_own_automation_environment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2Fd0b2c197900fdd5941d9beeb412575d016392263%0A*+Document+last+modified%3A+2024-07-28T14%3A16%3A48.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://mozilla.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 width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></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–2024 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/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"テスト自動化環境のセットアップ","mdn_url":"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment","locale":"ja","native":"日本語","sidebarHTML":"<ol><li class=\"section\"><a href=\"/ja/docs/Learn/Getting_started_with_the_web\">完全な初心者はこちらから!</a></li><li><details><summary>ウェブ入門</summary><ol><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web\">ウェブ入門</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">基本的なソフトウェアのインストール</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">ウェブサイトをどんな外見にするか</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">ファイルの扱い</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript の基本</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">ウェブサイトの公開</a></li><li><a href=\"/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">ウェブのしくみ</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/HTML\">HTML — ウェブの構造化</a></li><li><details><summary>HTML概論</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML\">HTML 入門</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">HTML を始めよう</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">ヘッド部には何が入る? HTML のメタデータ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML テキストの基礎</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">ハイパーリンクの作成</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">高度なテキスト整形</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">文書とウェブサイトの構造</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">HTML のデバッグ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">手紙のマークアップ</a></li><li><a href=\"/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">コンテンツのページの構造化</a></li></ol></details></li><li><details><summary>マルチメディアと埋め込み</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding\">マルチメディアとその埋め込み</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">HTML の画像</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">動画と音声のコンテンツ</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">object から iframe まで — その他の埋め込み技術</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">ウェブへのベクターグラフィックの追加</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">レスポンシブ画像</a></li><li><a href=\"/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla のスプラッシュページ</a></li></ol></details></li><li><details><summary>HTML 表</summary><ol><li><a href=\"/ja/docs/Learn/HTML/Tables\">HTML 表</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Basics\">HTML の表の基本</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Advanced\">HTML 表の高度な機能とアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/HTML/Tables/Structuring_planet_data\">惑星データの構造化</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/CSS\">CSS — ウェブのスタイル設定</a></li><li><details><summary>CSS の第一歩</summary><ol><li><a href=\"/ja/docs/Learn/CSS/First_steps\">CSS の第一歩</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/What_is_CSS\">CSS とは何か</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/Getting_started\">CSS 入門</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS の構造</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/How_CSS_works\">CSS はどう働くか</a></li><li><a href=\"/ja/docs/Learn/CSS/First_steps/Styling_a_biography_page\">経歴ページのスタイル設定</a></li></ol></details></li><li><details><summary>CSS の構成要素</summary><ol><li><a href=\"/ja/docs/Learn/CSS/Building_blocks\">CSS の構成要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors\">CSS セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">要素型、クラス、ID セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">属性セレクター</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">擬似クラスと擬似要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">結合子</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">カスケード、詳細度、継承</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Cascade_layers\">カスケードレイヤー</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/The_box_model\">ボックスモデル</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景と境界線</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">テキストの様々な方向の扱い</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Overflowing_content\">要素のオーバーフロー</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS の値と単位</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">CSS によるサイズ設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">画像、メディア、フォーム要素</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Styling_tables\">表のスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">ボックスの高度な効果</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS\">CSS のデバッグ</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Organizing\">CSS の整理</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">基本的な CSS の理解</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">美しいレターヘッド付きの便箋の作成</a></li><li><a href=\"/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">かっこいいボックス</a></li></ol></details></li><li><details><summary>テキストの装飾</summary><ol><li><a href=\"/ja/docs/Learn/CSS/Styling_text\">テキストの装飾</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Fundamentals\">基本的なテキストとフォントのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_lists\">リストの装飾</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Styling_links\">リンクのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Web_fonts\">ウェブフォント</a></li><li><a href=\"/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">コミュニティスクールのホームページの組版</a></li></ol></details></li><li><details><summary>CSS レイアウト</summary><ol><li><a href=\"/ja/docs/Learn/CSS/CSS_layout\">CSS レイアウト</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Introduction\">CSS レイアウト入門</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Normal_Flow\">通常フロー</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Flexbox\">フレックスボックス</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Grids\">グリッド</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Floats\">浮動ボックス</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Positioning\">位置指定</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">段組みレイアウト</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Responsive_Design\">レスポンシブデザイン</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Media_queries\">メディアクエリーの初心者向けガイド</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">過去のレイアウト方法</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">古いブラウザーの対応</a></li><li><a href=\"/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">基礎的なレイアウトの理解</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/JavaScript\">JavaScript — 動的クライアントサイドスクリプト</a></li><li><details><summary>JavaScript の第一歩</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/First_steps\">JavaScript の第一歩</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">JavaScript とは</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/A_first_splash\">JavaScript の最初の一歩</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/What_went_wrong\">何が間違っている? JavaScript のトラブルシューティング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Variables\">必要な情報を保管する — 変数</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Math\">JavaScript での基本演算 — 数値と演算子</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Strings\">テキストの扱い — JavaScript での文字列</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods\">便利な文字列メソッド</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Arrays\">配列</a></li><li><a href=\"/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator\">バカ話ジェネレーター</a></li></ol></details></li><li><details><summary>JavaScript の構成要素</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks\">JavaScript の構成要素</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/conditionals\">コードでの意思決定 — 条件文</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Looping_code\">ループするコード</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Functions\">関数 — 再利用可能なコードブロック</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">独自の関数を作る</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Return_values\">関数の返値</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Events\">イベント入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">イベントのバブリング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery\">イメージギャラリー</a></li></ol></details></li><li><details><summary>JavaScript オブジェクトの紹介</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Objects\">JavaScript オブジェクト入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Basics\">JavaScript オブジェクトの基本</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object_prototypes\">オブジェクトのプロトタイプ</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object-oriented_programming\">オブジェクト指向プログラミング</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">JavaScript のクラス</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/JSON\">JSON の操作</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Object_building_practice\">オブジェクト構築の練習</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">バウンスボールのデモに機能を追加する</a></li></ol></details></li><li><details><summary>非同期 JavaScript</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous\">非同期 JavaScript</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Introducing\">非同期 JavaScript 入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Promises\">プロミスの使い方</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">プロミスベースの API の実装方法</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">ワーカー入門</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">アニメーションを順番に再生する</a></li></ol></details></li><li><details><summary>クライアントサイド Web API</summary><ol><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs\">クライアントサイド Web API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Web API の紹介</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">文書の操作</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">サーバーからのデータ取得</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">サードパーティ API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">グラフィックの描画</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">動画と音声の API</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">クライアント側ストレージ</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Forms\">ウェブフォーム — ユーザーデータの操作</a></li><li><details><summary>ウェブフォームの構成要素</summary><ol><li><a href=\"/ja/docs/Learn/Forms\">ウェブフォームの構成要素</a></li><li><a href=\"/ja/docs/Learn/Forms/Your_first_form\">初めてのフォーム</a></li><li><a href=\"/ja/docs/Learn/Forms/How_to_structure_a_web_form\">フォームの構築方法</a></li><li><a href=\"/ja/docs/Learn/Forms/Basic_native_form_controls\">基本的なネイティブフォームコントロール</a></li><li><a href=\"/ja/docs/Learn/Forms/HTML5_input_types\">HTML5 の入力型</a></li><li><a href=\"/ja/docs/Learn/Forms/Other_form_controls\">その他のフォームコントロール</a></li><li><a href=\"/ja/docs/Learn/Forms/Styling_web_forms\">ウェブフォームへのスタイル設定</a></li><li><a href=\"/ja/docs/Learn/Forms/Advanced_form_styling\">フォームへの高度なスタイル設定</a></li><li><a href=\"/ja/docs/Learn/Forms/UI_pseudo-classes\">UI 擬似クラス</a></li><li><a href=\"/ja/docs/Learn/Forms/Form_validation\">クライアント側のフォーム検証</a></li><li><a href=\"/ja/docs/Learn/Forms/Sending_and_retrieving_form_data\">フォームデータの送信</a></li></ol></details></li><li><details><summary>高度なウェブフォームテクニック</summary><ol><li><a href=\"/ja/docs/Learn/Forms/How_to_build_custom_form_controls\">カスタムフォームコントロールの作成方法</a></li><li><a href=\"/ja/docs/Learn/Forms/Sending_forms_through_JavaScript\">JavaScript によるフォームの送信</a></li><li><a href=\"/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">フォームコントロール向けの CSS プロパティの互換性一覧表</a></li><li><a href=\"/ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">古いブラウザーでの HTML フォーム</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Accessibility\">アクセシビリティ — 誰もウェブを利用できるようにする</a></li><li><details><summary>アクセシビリティガイド</summary><ol><li><a href=\"/ja/docs/Learn/Accessibility\">アクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/Accessibility/What_is_accessibility\">アクセシビリティとは</a></li><li><a href=\"/ja/docs/Learn/Accessibility/HTML\">HTML: アクセシビリティの良き基本</a></li><li><a href=\"/ja/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS と JavaScript のアクセシビリティのベストプラクティス</a></li><li><a href=\"/ja/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA の基本</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Multimedia\">アクセシブルなマルチメディア</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Mobile\">モバイルのアクセシビリティ</a></li><li><a href=\"/ja/docs/Learn/Accessibility/Accessibility_troubleshooting\">評価: アクセシビリティのトラブルシューティング</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Performance\">パフォーマンス — ウェブサイトを高速かつ応答性の高いものにする</a></li><li><details><summary>パフォーマンスガイド</summary><ol><li><a href=\"/ja/docs/Learn/Performance\">ウェブパフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/why_web_performance\">ウェブパフォーマンスの「なぜ」</a></li><li><a href=\"/ja/docs/Learn/Performance/What_is_web_performance\">ウェブパフォーマンスとは</a></li><li><a href=\"/ja/docs/Learn/Performance/Perceived_performance\">知覚的パフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/Measuring_performance\">パフォーマンスの測定</a></li><li><a href=\"/ja/docs/Learn/Performance/Multimedia\">マルチメディア: 画像</a></li><li><a href=\"/ja/docs/Learn/Performance/video\">マルチメディア: 動画</a></li><li><a href=\"/ja/docs/Learn/Performance/JavaScript\">JavaScript のパフォーマンス</a></li><li><a href=\"/ja/docs/Learn/Performance/HTML\">HTML のパフォーマンス機能</a></li><li><a href=\"/ja/docs/Learn/Performance/CSS\">CSS のパフォーマンス最適化</a></li><li><a href=\"/ja/docs/Learn/Performance/business_case_for_performance\">ウェブパフォーマンスのビジネスケース</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/MathML\">MathML — MathML を使用して数学を記述する</a></li><li><details><summary>MathML の最初のステップ</summary><ol><li><a href=\"/ja/docs/Learn/MathML/First_steps\">MathML 第一歩の概要</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Getting_started\">MathML を始めよう</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Text_containers\">MathML テキストコンテナー</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML 分数と根号</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Scripts\">MathML 添字要素</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Tables\">MathML 表</a></li><li><a href=\"/ja/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">三大数式</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/../Games\">ゲーム — ウェブ用ゲームの開発</a></li><li><details><summary>ガイドとチュートリアル</summary><ol><li><a href=\"/ja/docs/Games/Introduction\">ウェブ用のゲーム開発入門</a></li><li><a href=\"/ja/docs/Games/Techniques\">ゲーム開発テクニック</a></li><li><a href=\"/ja/docs/Games/Tutorials\">チュートリアル</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Games/Publishing_games\">Publishing games</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Tools_and_testing\">ツールとテスト</a></li><li><details><summary>クライアントサイドウェブ開発ツール</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">クライアントサイドウェブ開発ツールの理解</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">クライアントサイドツールの概要</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">コマンドライン短期集中講座</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">パッケージ管理の基本</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">完全なツールチェーンの導入</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">アプリのデプロイ</a></li></ol></details></li><li><details><summary>クライアントサイドフレームワークの概要</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">クライアントサイドフレームワークの概要</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">フレームワークの主な機能</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">React を始める</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">React ToDoリストをはじめる</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">React アプリのコンポーネント化</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React のリソース</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Getting started with Vue</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Creating our first Vue component</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering a list of Vue components</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Adding a new todo form: Vue events, methods, and models</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling Vue components with CSS</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Using Vue computed properties</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue conditional rendering: editing existing todos</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue refs and lifecycle methods for focus management</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue resources</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Svelte をはじめる</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starting our Svelte to-do list app</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamic behavior in Svelte: working with variables and props</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Componentizing our Svelte app</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Working with Svelte stores</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript support in Svelte</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Deployment and next steps</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Angular をはじめる</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Angular todo リストアプリの事始め</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Angular アプリのスタイリング</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">item コンポーネントの作成</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">To Do アイテムのフィルタリング</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Angular アプリケーションのビルドとその他のリソース</a></li></ol></details></li><li><details><summary>Git と GitHub</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/GitHub\">Git と GitHub</a></li></ol></details></li><li><details open=\"\"><summary>ブラウザー横断テスト</summary><ol><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing\">ブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">はじめてのブラウザー横断テスト</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">テスト実行のための戦略</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">一般的な HTML と CSS の問題への対処</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">よくある JavaScript の問題の扱い</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">よくあるアクセシビリティの問題を扱う</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">機能検出の実装</a></li><li><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">自動化テストの紹介</a></li><li><em><a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\" aria-current=\"page\">テスト自動化環境のセットアップ</a></em></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Server-side\">サーバーサイドウェブサイトプログラミング</a></li><li><details><summary>サーバーサイドのウェブサイトプログラミングの第一歩</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/First_steps\">サーバーサイドのウェブサイトプログラミングの第一歩</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Introduction\">サーバーサイドの概要</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Client-Server_overview\">クライアント・サーバーの概要</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Web_frameworks\">サーバーサイドウェブフレームワーク</a></li><li><a href=\"/ja/docs/Learn/Server-side/First_steps/Website_security\">ウェブサイトのセキュリティ</a></li></ol></details></li><li><details><summary>Django ウェブフレームワーク (Python)</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/Django\">Django ウェブフレームワーク (Python)</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/Introduction\">Django の紹介</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/development_environment\">Django 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django チュートリアル: 地域図書館ウェブサイト</a></li><li><a href=\"/ja/docs/Learn/Server-side/Django/skeleton_website\">Django チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/web_application_security\">Django web application security</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li><details><summary>Express ウェブフレームワーク (Node.js/JavaScript)</summary><ol><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs\">Express ウェブフレームワーク (Node.js/JavaScript)</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node の紹介</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/development_environment\">Node 開発環境の設定</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express チュートリアル: 地域図書館のウェブサイト</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express チュートリアル Part 5: ライブラリーデータの表示</a></li><li><a href=\"/ja/docs/Learn/Server-side/Express_Nodejs/forms\">Express チュートリアル Part 6: フォームの操作</a></li><li><a class=\"only-in-en-us\" title=\"このページは現在、英語のみで利用可能です。\" href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li><li class=\"section\"><a href=\"/ja/docs/Learn/Common_questions\">その他のリソース</a></li><li><details><summary>よくある質問</summary><ol><li><a href=\"/ja/docs/Learn/Common_questions\">よくある質問</a></li><li><a href=\"/ja/docs/Learn/HTML/Howto\">HTML を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/CSS/Howto\">CSS を使ってよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/JavaScript/Howto\">JavaScript のコードのよくある問題を解決する</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Web_mechanics\">ウェブの仕組み</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Tools_and_setup\">ツールとセットアップ</a></li><li><a href=\"/ja/docs/Learn/Common_questions/Design_and_accessibility\">デザインとアクセシビリティ</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\"><span class=\"button-wrap\"> 前のページ </span></a></li>\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Overview: ブラウザー横断テスト</span></a></li>\n \n</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/HTML\">HTML</a>、<a href=\"/ja/docs/Learn/CSS\">CSS</a>、<a href=\"/ja/docs/Learn/JavaScript\">JavaScript</a> 言語の主要部に通じていること。\n <a href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">ブラウザー横断テストの基本</a>について高水準の考えを持っていること。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目標:</th>\n <td>Selenium によるローカルテスト環境のセットアップ方法や Selenium を使用したテストの実行方法、Sauce Labs や BrowserStack などのツールとの統合する方法の案内。</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> 他のサーバーサイド環境で 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/Tools_and_testing/Cross_browser_testing/Automated_testing#node_%E3%81%A8_npm_%E3%81%AE%E8%A8%AD%E5%AE%9A\">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> 以前に 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://chromedriver.chromium.org/downloads\" 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> もう一度言っておきますが、 <code>PATH</code> に追加するパスは、ドライバーそのものへのパスではなく、ドライバーを格納するディレクトリーへのパスである必要があります。これはよく間違えられます。</p>\n</div>\n<p>macOS システムとほとんどの Linux システムで <code>PATH</code> 変数を設定するには、次のようにします。</p>\n<ol>\n <li>\n <p>まだ <code>bash</code> シェルを使用していない場合（例えば、 macOS システムの既定では <code>bash</code> ではなく <code>zsh</code> シェルです）、<code>bash</code> シェルに切り替えます。</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>exec bash\n</code></pre></div>\n </li>\n <li>\n <p><code>.bash_profile</code>（または <code>.bashrc</code>）ファイルを開きます（隠しファイルが表示されていない場合は表示させる必要があります。 <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 </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\n\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 </li>\n <li>\n <p>端末に表示されるはずです。</p>\n </li>\n</ol>\n<p>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>\n<p>では、すべてが動作していることを確認するために、簡単なテストをしてみましょう。</p>\n<ol>\n <li>\n <p>自分のプロジェクトディレクトリーに <code>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, 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://www.google.com/ncr\");\n await driver.findElement(By.name(\"q\")).sendKeys(\"webdriver\", Key.RETURN);\n await driver.wait(until.titleIs(\"webdriver - Google Search\"), 1000);\n } finally {\n await driver.sleep(2000); // Delay long enough to see search page!\n await driver.quit();\n }\n})();\n</code></pre></div>\n <div class=\"notecard note\">\n <p><strong>メモ:</strong> この関数は <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 google_test\n</code></pre></div>\n </li>\n</ol>\n<p>\n Firefox のインスタンスが自動的に開くのが確認できるはずです。 Google が自動的にタブに読み込まれ、検索ボックスに \"webdriver\" と入力され、検索ボタンがクリックされます。その後、 WebDriver は 1 秒待ちます。文書タイトルがアクセスされ、 \"webdriver - Google Search\" であれば、テストが合格したとメッセージを返します。\n その後 4 秒待ち、 WebDriver は Firefox インスタンスを閉じて、停止します。\n</p>"}},{"type":"prose","value":{"id":"一度に複数ブラウザーでテストする","title":"一度に複数ブラウザーでテストする","isH3":false,"content":"<p>複数のブラウザーで同時にテストを実行することを妨げるものは何もありません。試してみましょう！</p>\n<ol>\n <li>\n <p>自分のプロジェクトのディレクトリーに、 <code>google_test_multiple.js</code> と呼ばれる新しいファイルを作成します。どのブラウザーが利用できるか応じて、追加した他のブラウザーへの参照を自由に変更したり、削除したりしてください。正しいブラウザードライバーを設定する必要があります。他のブラウザーのために <code>.forBrowser()</code> メソッド内で使用する文字列に関しては、 <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html\" 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();\n\nconst driver_chr = new Builder().forBrowser(Browser.CHROME).build();\n\nasync function searchTest(driver) {\n try {\n await driver.get(\"http://www.google.com\");\n await driver.findElement(By.name(\"q\")).sendKeys(\"webdriver\", Key.RETURN);\n await driver.sleep(2000).then(async () => {\n await driver.getTitle().then(async (title) => {\n if (title === \"webdriver - Google Search\") {\n console.log(\"Test passed\");\n } else {\n console.log(\"Test failed\");\n }\n });\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 google_test_multiple\n</code></pre></div>\n </li>\n <li>\n <p>もしMacを使用していてSafariをテストしようとすると、エラーメッセージ \"Could not create a session. \"が表示されるかもしれません： WebDriverを使用してSafariを制御するには、SafariのDevelopメニューで'Allow Remote Automation'オプションを有効にする必要があります。これが表示された場合は、指定された指示に従ってもう一度試してください。</p>\n </li>\n</ol>\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/module/selenium-webdriver/\" 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>\n <code>Builder()</code> コンストラクターを使用して新しいドライバーのインスタンスを作成し、 <code>forBrowser()</code> メソッドを連結して、このビルダーでテストしたいブラウザーを指定します。\n 最後に <code>build()</code> メソッドを連結して、実際にドライバのインスタンスを構築します（これらの機能の詳細情報は <a href=\"https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Builder.html\" class=\"external\" target=\"_blank\">Builder クラスリファレンス</a> を参照してください）。\n</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, \"46\", \"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:46: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>"}},{"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> この章とその下記の機能の詳細については、<a href=\"https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_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(\n \"file:///Users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html\",\n);\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/fake-div-buttons.html\");\n</code></pre></div>\n<p>しかし、リモートサーバーの場所を使用したほうがコードの柔軟性が高まります。リモートサーバーを使用してテストを実行し始める際には（後述します）、ローカルパスを使用しようとするとコードが壊れてしまいます。</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 } = 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</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>自分のプロジェクトディレクトリー内にいることを確認して、テストを実行してみてください。</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.js\n</code></pre></div>\n<p>ボタンのテキストラベルがコンソールに表示されるはずです。</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, until } = 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(\"Filling in my form\");\n\n const button = driver.findElement(By.css(\"button:nth-of-type(1)\"));\n\n button.click();\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>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>driver.sleep(1000).then(() => {\n driver.findElement(By.name(\"q\")).sendKeys(Key.TAB);\n});\n</code></pre></div>"}},{"type":"prose","value":{"id":"何かが完了するのを待つ","title":"何かが完了するのを待つ","isH3":true,"content":"<p>WebDriver が何かを完了するまで待ってからテストを行いたい時があります。例えば新しいページを読み込んだ場合、ページの DOM の読み込みが完了するまで待ってから要素を操作する必要があり、そうしないとテストが失敗する可能性が高くなります。</p>\n<p>例えばこの例の <code>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>driver.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</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, until } = require(\"selenium-webdriver\");\n\nconst driver = new Builder().forBrowser(\"firefox\").build();\n\n(async function example() {\n try {\n driver.get(\n \"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\",\n );\n\n driver.sleep(2000).then(() => {\n const input = driver.findElement(By.id(\"name\"));\n\n input.sendKeys(\"Filling in my form\");\n input.getAttribute(\"value\").then((value) => {\n if (value !== \"\") {\n console.log(\"Form input editable\");\n }\n });\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 } finally {\n await driver.sleep(4000); // Delay long enough to see search page!\n driver.quit();\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> また、 <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>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>driver.quit();\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=\"#%E6%96%87%E6%9B%B8%E3%81%A8%E3%81%AE%E3%82%84%E3%82%8A%E3%81%A8%E3%82%8A\">文書とのやりとり</a>のときには、ロケーターとページオブジェクトが変更されにくいものを使用するようにしましょう。テストを実行したいテスト可能な要素がある場合、次のサイトの反復処理で変更されることのない、安定した ID や CSS セレクターで選択できるページ上の位置を持つようにしましょう。テストは可能な限りもろくならないように、つまり、何かが変わっても壊れないようにしたいものです。</li>\n <li>アトミックなテストを書きます。各テストはひとつのことだけをテストするようにし、どのテストファイルがどの基準をテストしているのかを簡単に把握できるようにします。例えば、上で見た <code>google_test.js</code> のテストは、検索結果ページのタイトルが正しく設定されているかどうかという単一のことをテストするだけなので、とても良いものです。このテストにもっと良い名前をつけて、 google のテストを追加したときに、このテストが何をするのかがわかりやすいようにすることもできます。おそらく、 <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":"lambdatest","title":"LambdaTest","isH3":true,"content":"<p>Selenium テストを LambdaTest 上でリモート動作させるのはとても簡単です。必要なコードは下記パターンに従ってください。</p>\n<p>例を書いてみましょう。</p>\n<ol>\n <li>\n <p>自分のプロジェクトディレクトリーに、 <code>lambdatest_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 { By, Builder } = require(\"selenium-webdriver\");\n\n// username: Username can be found at automation dashboard\nconst USERNAME = \"{username}\";\n\n// AccessKey: AccessKey can be generated from automation dashboard or profile section\nconst KEY = \"{accessKey}\";\n\n// gridUrl: gridUrl can be found at automation dashboard\nconst GRID_HOST = \"hub.lambdatest.com/wd/hub\";\n\nfunction searchTextOnGoogle() {\n // Setup Input capabilities\n const capabilities = {\n platform: \"windows 10\",\n browserName: \"chrome\",\n version: \"67.0\",\n resolution: \"1280x800\",\n network: true,\n visual: true,\n console: true,\n video: true,\n name: \"Test 1\", // name of the test\n build: \"NodeJS build\", // name of the build\n };\n\n // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub\n const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`;\n\n // setup and build selenium driver object\n const driver = new Builder()\n .usingServer(gridUrl)\n .withCapabilities(capabilities)\n .build();\n\n // navigate to a URL, search for a text and get title of page\n driver.get(\"https://www.google.com/ncr\").then(function () {\n driver\n .findElement(By.name(\"q\"))\n .sendKeys(\"LambdaTest\\n\")\n .then(function () {\n driver.getTitle().then((title) => {\n setTimeout(() => {\n if (title === \"LambdaTest - Google Search\") {\n driver.executeScript(\"lambda-status=passed\");\n } else {\n driver.executeScript(\"lambda-status=failed\");\n }\n driver.quit();\n }, 5000);\n });\n });\n });\n}\n\nsearchTextOnGoogle();\n</code></pre></div>\n </li>\n <li>\n <p><a href=\"https://www.lambdatest.com/selenium-automation\" class=\"external\" target=\"_blank\">LambdaTest automation dashboard</a> にアクセスし、右上の <strong>key</strong> アイコンをクリックして LambdaTest のユーザー名とアクセスキーを取得します（<em>Username and Access Keys</em> 参照）。コード内の <code>{username}</code> と <code>{accessKey}</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 lambdatest_google_test\n</code></pre></div>\n <p>\n テストは LambdaTest に送信され、テストの出力は LambdaTest コンソールに反映されます。\n これらの結果を LambdaTest プラットフォームからレポート目的で抽出したい場合は、 <a href=\"https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/\" class=\"external\" target=\"_blank\">LambdaTest restful API</a> を使用することができます。\n </p>\n </li>\n <li>\n <p>\n これで <a href=\"https://accounts.lambdatest.com/dashboard\" class=\"external\" target=\"_blank\">LambdaTest Automation dashboard</a> に行くと、テストが載っています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。\n また、 <code>if</code> や <code>else</code> のコードブロックがあるため、ステータスが <strong>completed</strong> ではなく、 <strong>passed</strong> や <strong>failed</strong> と表示されます。\n </p>\n <p>\n <a href=\"https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg\" class=\"external\" target=\"_blank\"><img src=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/automation-logs-1.jpg\" alt=\"LambdaTest Automation Dashboard\" width=\"1600\" height=\"758\" loading=\"lazy\"></a>\n テストビルド内のすべてのテストについて、ネットワーク、コマンド、例外、Selenium ログを取得できます。また、Selenium スクリプトの実行を録画した動画も探すことができます。\n </p>\n </li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> LambdaTest Automation Dashboard の <em>HELP</em> ボタンをクリックすると、LambdaTest オートメーションを始めるには十分な情報が提供されます。また、<a href=\"https://www.lambdatest.com/support/docs/quick-guide-to-run-node-js-tests-on-lambdatest-selenium-grid/\" class=\"external\" target=\"_blank\">Node JS で最初の Selenium スクリプトを実行する</a>ことに関する私たちの文書化にも対応しています。</p>\n</div>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> テストのためのケイパビリティオブジェクトを手で書きたくない場合は、 <a href=\"https://www.lambdatest.com/capabilities-generator/\" class=\"external\" target=\"_blank\">Selenium Desired Capabilities Generator</a> を用いて生成することができます。</p>\n</div>"}},{"type":"prose","value":{"id":"browserstack","title":"BrowserStack","isH3":true,"content":"<p>BrowserStack で Selenium テストをリモートで動作するように取得するのは簡単です。必要なコードは下記パターンに従うことです。</p>\n<p>例を書いてみましょう。</p>\n<ol>\n <li>\n <p>自分のプロジェクトディレクトリーに、 <code>bstack_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 request = require(\"request\");\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://www.google.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 - Google Search\") {\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\">BrowserStack Account - Summary</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_google_test\n</code></pre></div>\n <p>テストは BrowserStack に送信され、テスト結果がコンソールに返されます。これは、何らかの結果報告メカニズムを記載することの重要性を示しています。</p>\n </li>\n <li>\n <p>\n これで、 <a href=\"https://www.browserstack.com/automate\" class=\"external\" target=\"_blank\">BrowserStack automation dashboard</a> のページに戻ると、テストが掲載されています。\n \n <img src=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/bstack_automated_results.png\" alt=\"BrowserStack automated results\" width=\"1000\" height=\"504\" loading=\"lazy\">\n </p>\n </li>\n</ol>\n<p>テストのリンクをクリックすると、新しい画面が取得され、テストの録画動画や、テストに関連する複数の詳細なログ情報を見ることができます。</p>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> Browserstack 自動化ダッシュボードの <em>Resources</em> メニューオプションには、自動テストを実行するために使用するための有益な情報が豊富に格納されています。ノード固有の情報については、 <a href=\"https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs\" class=\"external\" target=\"_blank\">Node JS Documentation for writing automate test scripts in Node JS</a> を参照してください。 BrowserStack で使用することができますすべての有益なことを見つけるために、ドキュメントを探索してください。</p>\n</div>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> テストのためのケイパビリティオブジェクトを手で書きたくなければ、ドキュメントにあるジェネレーターを使用して生成することができます。 <a href=\"https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test\" class=\"external\" target=\"_blank\">Run your first test</a> を参照ください。</p>\n</div>\n<h4 id=\"プログラムによる_browserstack_テストの詳細の入力\">プログラムによる BrowserStack テストの詳細の入力</h4>\n<p>BrowserStack REST API や他にもいくつかの機能を使用して、自分のテストに、合格したかどうか、合格した理由、テストがどのプロジェクトの一部であるかなどの詳細をアノテーションすることができます。 BrowserStack は既定ではこれらの詳細を知りません！</p>\n<p>それでは、 <code>bstack_google_test.js</code> デモを更新して、これらがどのように動作するのかを示してみましょう。</p>\n<ol>\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>npm install request\n</code></pre></div>\n </li>\n <li>\n <p>次に、 node request モジュールをインポートして、 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 request = require(\"request\");\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' : 'Google test 2'\n</code></pre></div>\n </li>\n <li>\n <p>次に、現在のセッションの <code>sessionId</code> にアクセスして、リクエストをどこに送ればよいかを知る必要があります（後で説明するように、この ID はリクエスト URL に記載されます）。以下の行を <code>driver</code> オブジェクトを作成するブロック (<code>let 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>let sessionId;\n\ndriver.session_.then((sessionData) => {\n sessionId = sessionData.id_;\n});\n</code></pre></div>\n </li>\n <li>\n <p>最後に、コードの一番下にある <code>driver.sleep(2000)</code> ブロックを更新して、 REST API 呼び出しを追加します（この場合も、コード内の <code>YOUR-USER-NAME</code> と <code>YOUR-ACCESS-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>driver.sleep(2000).then(() => {\n driver.getTitle().then((title) => {\n if (title === \"webdriver - Google Search\") {\n console.log(\"Test passed\");\n request({\n uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,\n method: \"PUT\",\n form: {\n status: \"passed\",\n reason: \"Google results showed correct title\",\n },\n });\n } else {\n console.log(\"Test failed\");\n request({\n uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`,\n method: \"PUT\",\n form: {\n status: \"failed\",\n reason: \"Google results showed wrong title\",\n },\n });\n }\n });\n});\n</code></pre></div>\n </li>\n</ol>\n<p>テストが完全に完了すると、 API を BrowserStack に呼び出して、テストの合格、不合格、結果の理由を更新します。</p>\n<p>これで <a href=\"https://live.browserstack.com/dashboard\" class=\"external\" target=\"_blank\">BrowserStack automation dashboard</a> ページに戻ると、以前と同じように、更新されたデータが添付されたテストセッションが利用できるはずです。</p>\n<p>\n <img src=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/bstack_custom_results.png\" alt=\"BrowserStack Custom Results\" width=\"1000\" height=\"546\" loading=\"lazy\">\n</p>"}},{"type":"prose","value":{"id":"sauce_labs","title":"Sauce Labs","isH3":true,"content":"<p>Sauce Labs 上で Selenium テストをリモートで実行するための取得もとても単純で、いくつかの構文の違いはあるものの、 BrowserStack と非常によく似ています。必要なコードは下記パターンのようになります。</p>\n<p>例を書いてみましょう。</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>\n これで <a href=\"https://app.saucelabs.com/dashboard/tests\" class=\"external\" target=\"_blank\">Sauce Labs Automated Test dashboard</a> のページに行くと、テストが掲載されています。ここから動画やスクリーンショット、他にもそのようなデータを見ることができます。\n \n <img src=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/sauce_labs_automated_test.png\" alt=\"Sauce Labs automated test\" width=\"1216\" height=\"250\" loading=\"lazy\">\n </p>\n </li>\n</ol>\n<div class=\"notecard note\">\n <p><strong>メモ:</strong> Sauce 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> 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>\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>\n <img src=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment/sauce_labs_updated_job_info.png\" alt=\"Sauce Labs Updated Job info\" width=\"1088\" height=\"150\" loading=\"lazy\">\n</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_%E3%81%A7_selenium_%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97\">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://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><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\"><span class=\"button-wrap\"> 前のページ </span></a></li>\n <li><a class=\"button secondary\" href=\"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Overview: ブラウザー横断テスト</span></a></li>\n \n</ul>"}}],"toc":[{"text":"Selenium","id":"selenium"},{"text":"一度に複数ブラウザーでテストする","id":"一度に複数ブラウザーでテストする"},{"text":"WebDriver 構文速習コース","id":"webdriver_構文速習コース"},{"text":"テストのベストプラクティス","id":"テストのベストプラクティス"},{"text":"リモートテストの実行","id":"リモートテストの実行"},{"text":"Selenium と CI ツールのインテグレーション","id":"selenium_と_ci_ツールのインテグレーション"},{"text":"まとめ","id":"まとめ"}],"summary":"この記事では、 Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を説明します。またローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。","popularity":0,"modified":"2024-07-28T14:16:48.000Z","other_translations":[{"locale":"de","title":"Einrichten Ihrer eigenen Testautomatisierungsumgebung","native":"Deutsch"},{"locale":"en-US","title":"Setting up your own test automation environment","native":"English (US)"},{"locale":"zh-CN","title":"搭建自己的自动化测试环境","native":"中文 (简体)"}],"pageType":"unknown","source":{"folder":"ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/d0b2c197900fdd5941d9beeb412575d016392263","filename":"index.md"},"short_title":"テスト自動化環境のセットアップ","parents":[{"uri":"/ja/docs/Learn","title":"ウェブ開発を学ぶ"},{"uri":"/ja/docs/Learn/Tools_and_testing","title":"ツールとテスト"},{"uri":"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing","title":"ブラウザー横断テスト"},{"uri":"/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment","title":"テスト自動化環境のセットアップ"}],"pageTitle":"テスト自動化環境のセットアップ - ウェブ開発を学ぶ | MDN","noIndexing":false}}</script></body></html>