path: root/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html

---
title: 自動テストのイントロダクション
slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
translation_of: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing
---
<div> {{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>

<p class="summary">1日に数回、複数のブラウザやデバイスで手動でテストを実行すると、面倒で時間がかかる場合があります。これを効率的に処理するには、自動化ツールに慣れておく必要があります。この記事では、利用可能なもの、タスクランナーの使い方、そして Sauce Labs や Browser Stack などの市販のブラウザテスト自動化アプリケーションの基本的な使い方を見ていきます。</p>

<table class="learn-box standard-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>自動テストにはどのようなものが含まれているのか、それがどのようにあなたの生活を楽にすることができるのか、そして物事を楽にするいくつかの商用製品をどのように利用するかの理解を提供する。</td>
  </tr>
 </tbody>
</table>

<h2 id="Automation_makes_things_easy">Automation makes things easy</h2>

<p>Throughout this module we have detailed loads of different ways in which you can test your websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more. Sounds like a lot of work, doesn't it?</p>

<p>We agree — testing all the things we've looked at in previous articles manually can be a real pain. Fortunately, there are tools to help us automate some of this pain away. There are two main ways in which we can automate the tests we've been talking about in this module:</p>

<ol>
 <li>Use a task runner such as <a href="http://gruntjs.com/">Grunt</a> or <a href="http://gulpjs.com/">Gulp</a>, or <a href="https://docs.npmjs.com/misc/scripts">npm scripts</a> to run tests and clean up code during your build process. This is a great way to perform tasks like linting and minifying code, adding in CSS prefixes or transpiling nascent JavaScript features for maximum cross-browser reach, and so on.</li>
 <li>Use a browser automation system like <a href="http://www.seleniumhq.org/">Selenium</a> to run specific tests on installed browsers and return results, alerting you to failures in browsers as they crop up. Commercial cross-browser testing apps like <a href="https://saucelabs.com/">Sauce Labs</a> and <a href="https://www.browserstack.com/">Browser Stack</a> are based on Selenium, but allow you to access their set up remotely using a simple interface, saving you the hassle of setting up your own testing system.</li>
</ol>

<p>We will look at how to set up your own Selenium-based testing system in the next article. In this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above.</p>

<div class="note">
<p><strong>Note</strong>: the above two categories are not mutually exclusive. It is possible to set up a task runner to access a service like Sauce Labs via an API, run cross browser tests, and return results. We will look at this below as well.</p>
</div>

<h2 id="Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</h2>

<p>As we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process. For example, this could be every time you save a file, or at some other point. Inside this section we'll look at how to automate task running with Node and Gulp, a beginner-friendly option.</p>

<h3 id="Setting_up_Node_and_npm">Setting up Node and npm</h3>

<p>Most tools these days are based on {{Glossary("Node.js")}}, so you'll need to install it from <a href="https://nodejs.org/">nodejs.org</a>:</p>

<ol>
 <li>Download the installer for your system from the above site. (If you already have Node and npm installed, jump to point 4)</li>
 <li>Install it like you would any other program. Note that Node comes with <a href="https://www.npmjs.com/">Node Package Manager</a> (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects.</li>
 <li>Once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of Node and npm:
  <pre class="brush: bash">node -v
npm -v</pre>
 </li>
 <li>If you've got Node/npm already installed, you should update them to their latest versions. To update Node, the most reliable way is to download and install an updated installer package from their website (see link above). To update npm, use the following command in your terminal:
  <pre class="brush: bash">npm install npm@latest -g</pre>
 </li>
</ol>

<div class="note">
<p><strong>Note</strong>: If the above command fails with permissions errors, <a href="https://docs.npmjs.com/getting-started/fixing-npm-permissions">Fixing npm permissions</a> should sort you out.</p>
</div>

<p>To start using Node/npm-based packages on your projects, you need to set up your project directories as npm projects. This is easy to do.</p>

<p>For example, let's first create a test directory to allow us to play without fear of breaking anything.</p>

<ol>
 <li>Create a new directory somewhere sensible with using your file manager UI, or by navigating to the location you want and running the following command:
  <pre class="brush: bash">mkdir node-test</pre>
 </li>
 <li>To make this directory an npm project, you just need to go inside your test directory and initialize it, with the following:
  <pre class="brush: bash">cd node-test
npm init</pre>
 </li>
 <li>This second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now.</li>
 <li>Once all the questions have been asked, it will ask you if the information entered is OK. type <code>yes</code> and press Enter/Return and npm will generate a <code>package.json</code> file in your directory.</li>
</ol>

<p>This file is basically a config file for the project. You can customize it later, but for now it'll look something like this:</p>

<pre class="brush: json">{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}</pre>

<p>With this, you are ready to move on.</p>

<h3 id="Setting_up_Gulp_automation">Setting up Gulp automation</h3>

<p>Let's look at setting up Gulp and using it to automate some testing tools.</p>

<ol>
 <li>To begin with, create a test npm project using the procedure detailed at the bottom of the previous section.</li>
 <li>Next, you'll need some sample HTML, CSS and JavaScript content to test your system on — make copies of our sample <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/index.html">index.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/main.js">main.js</a>, and <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/style.css">style.css</a> files in a subfolder with the name <code>src</code> inside your project folder. You can try your own test content if you like, but bear in mind that such tools won't work on internal JS/CSS — you need external files.</li>
 <li>First, install gulp globally (meaning, it will be available across all projects) using the following command:
  <pre class="brush: bash">npm install --global gulp-cli</pre>
 </li>
 <li>Next, run the following command inside your npm project directory root to set up gulp as a dependency of your project:
  <pre class="brush: bash">npm install --save-dev gulp</pre>
 </li>
 <li>Now create a new file inside your project directory called <code>gulpfile.js</code>. This is the file that will run all our tasks. Inside this file, put the following:
  <pre class="brush: js">var gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp running');
});</pre>
  This requires the <code>gulp</code> module we installed earlier, and then runs a basic task that does nothing except for printing a message to the terminal — this is useful for letting us know that Gulp is working. Each gulp task is written in the same basic format — <code>gulp</code>'s <code>task()</code> method is run, and given two parameters — the name of the task, and a callback function containing the actual code to run to complete the task.</li>
 <li>You can run your gulp task with the following commands — try this now:
  <pre class="brush: bash">gulp
</pre>
 </li>
</ol>

<h3 id="Adding_some_real_tasks_to_Gulp">Adding some real tasks to Gulp</h3>

<p>To add some real tasks to Gulp, we need to think about what we want to do. A reasonable set of basic functionalities to run on our project is as follows:</p>

<ul>
 <li>html-tidy, css-lint, and js-hint to lint and report/fix common HTML/CSS/JS errors (see <a href="https://www.npmjs.com/package/gulp-htmltidy/">gulp-htmltidy</a>, <a href="https://www.npmjs.com/package/gulp-csslint/">gulp-csslint</a>, <a href="https://www.npmjs.com/package/gulp-jshint/">gulp-jshint</a>).</li>
 <li>Autoprefixer to scan our CSS and add vendor prefixes only where needed (see <a href="https://www.npmjs.com/package/gulp-autoprefixer/">gulp-autoprefixer</a>).</li>
 <li>babel to transpile any new JavaScript syntax features to traditional syntax that works in older browsers (see <a href="https://www.npmjs.com/package/gulp-babel/">gulp-babel</a>).</li>
</ul>

<p>See the links above for full instructions on the different gulp packages we are using.</p>

<p>To use each plugin, you need to first install it via npm, then require any dependencies at the top of the <code>gulpfile.js</code> file, then add your test(s) to the bottom of it, and finally add the name of your task inside the <code>default</code> task.</p>

<p>Before you go any further, update the default task to this:</p>

<pre class="brush: js">gulp.task('default', [ ]);</pre>

<p>Inside the array goes the names of all the tasks you want Gulp to run, once you run the <code>gulp</code> command on the command line.</p>

<h4 id="html-tidy">html-tidy</h4>

<ol>
 <li>Install using the following line:
  <pre class="brush: bash"><span class="text"><span>npm install --save-dev gulp-htmltidy</span></span>
</pre>

  <div class="note">
  <p><strong>Note</strong>: <code>--save-dev</code> adds the package as a dependency to your project. If you look in your project's <code>package.json</code> file, you'll see an entry for it as, it has been added to the <code>devDependencies</code> property.</p>
  </div>
 </li>
 <li class="line">Add the following dependencies to <code>gulpfile.js</code>:
  <pre class="brush: js">var htmltidy = require('gulp-htmltidy');</pre>
 </li>
 <li>Add the following test to the bottom of <code>gulpfile.js</code>:
  <pre class="brush: js">gulp.task('html', function() {
  return gulp.src('src/index.html')
        .pipe(htmltidy())
        .pipe(gulp.dest('build'));
});</pre>
 </li>
 <li>Add <code>'html'</code> as an item inside the array in the <code>default</code> task.</li>
</ol>

<p>Here we are grabbing our development <code>index.html</code> file — <code>gulp.src()</code> which allows us to grab a source file to do something with.</p>

<p>We next use the <code>pipe()</code> function to pass that source to another command to do something else with. We can chain as many of these together as we want. We first run <code>htmltidy()</code> on the source, which goes through and fixes errors in our file. The second <code>pipe()</code> function writes the output HTML file to the <code>build</code> directory.</p>

<p>In the input version of the file, you may have noticed that we put an empty {{htmlelement("p")}} element; htmltidy has removed this by the time the output file has been created.</p>

<h4 id="Autoprefixer_and_css-lint">Autoprefixer and css-lint</h4>

<ol>
 <li>Install using the following lines:
  <pre class="brush: bash">npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-csslint</pre>
 </li>
 <li>Add the following dependencies to <code>gulpfile.js</code>:
  <pre class="brush: js">var autoprefixer = require('gulp-autoprefixer');
var csslint = require('gulp-csslint');</pre>
 </li>
 <li>Add the following test to the bottom of <code>gulpfile.js</code>:
  <pre class="brush: js">gulp.task('css', function() {
    return gulp.src('src/style.css')
        .pipe(csslint())
        .pipe(csslint.formatter('compact'))
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('build'));
});</pre>
 </li>
 <li>Add <code>'css'</code> as an item inside the array in the <code>default</code> task.</li>
</ol>

<p>Here we grab our <code>style.css</code> file, run csslint on it (which outputs a list of any errors in your CSS to the terminal), then runs it through autoprefixer to add any prefixes needed to make nascent CSS features run in older browsers. At the end of the pipe chain, we output our modified prefixed CSS to the <code>build </code>directory. Note that this only works if csslint doesn't find any errors — try removing a curly brace from your CSS file and re-running gulp to see what output you get!</p>

<h4 id="js-hint_and_babel">js-hint and babel</h4>

<ol>
 <li>Install using the following lines:
  <pre class="editor editor-colors">npm install --save-dev gulp-babel @babel/preset-env
npm install --save-dev @babel/core
<span class="shell source"><span>npm install jshint gulp-jshint --save-dev</span></span>
</pre>
 </li>
 <li>Add the following dependencies to <code>gulpfile.js</code>:
  <pre class="editor editor-colors">var babel = require('gulp-babel');
<span class="js source"><span class="js storage type"><span>var</span></span><span> jshint </span><span class="assignment js keyword operator"><span>=</span></span><span> </span><span class="function-call js meta"><span class="function js support"><span>require</span></span><span class="js meta"><span class="begin definition js punctuation round"><span>(</span></span><span class="js quoted single string"><span class="begin definition js punctuation string"><span>'</span></span><span>gulp-jshint</span><span class="definition end js punctuation string"><span>'</span></span></span><span class="definition end js punctuation round"><span>)</span></span></span></span><span class="js punctuation statement terminator"><span>;</span></span></span>
</pre>
 </li>
 <li class="line">Add the following test to the bottom of <code>gulpfile.js</code>:
  <pre class="brush: js">gulp.task('js', function() {
    return gulp.src('src/main.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('build'));
});</pre>
 </li>
 <li>Add <code>'js'</code> as an item inside the array in the <code>default</code> task.</li>
</ol>

<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p>

<h4 id="Further_ideas">Further ideas</h4>

<p>Once all this is all set up, you can run the <code>gulp</code> command inside your project directory, and you should get an output like this:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14227/gulp-output.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>

<p>You can then try out the files output by your automated tasks by looking at them inside the <code>build</code> directory, and loading <code>build/index.html</code> in your web browser.</p>

<p>If you get errors, check that you've added all the dependencies and the tests as shown above; also try commenting out the HTML/CSS/JavaScript code sections and then rerunning gulp to see if you can isolate what the problem is.</p>

<p>Gulp comes with a <code>watch()</code> function that you can use to watch your files and run tests whenever you save a file. For example, try adding the following to the bottom of your <code>gulpfile.js</code>:</p>

<pre class="brush: js">gulp.task('watch', function(){
  gulp.watch('src/*.html', ['html']);
  gulp.watch('src/*.css', ['css']);
  gulp.watch('src/*.js', ['js']);
});</pre>

<p>Now try entering the <code>gulp watch</code> command into your terminal. Gulp will now watch your directory, and run the appropriate tasks whenever you save a change to an HTML, CSS, or JavaScript file.</p>

<div class="note">
<p><strong>Note</strong>: The <code>*</code> character is a wildcard character — here we're saying "run these tasks when any files of these types are saved. You could also use wildcards in your main tasks, for example <code>gulp.src('src/*.css')</code> would grab all your CSS files and then run piped tasks on them.</p>
</div>

<div class="note">
<p><strong>Note</strong>: One problem with our watch command above is that our CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.</p>
</div>

<p>There's a lot more you can do with Gulp. The <a href="http://gulpjs.com/plugins/">Gulp plugin directory</a> has literally thousands of plugins to search through.</p>

<h3 id="Other_task_runners">Other task runners</h3>

<p>There are many other task runners available. We certainly aren't trying to say that Gulp is the best solution out there, but it works for us and it is fairly accessible to beginners. You could also try using other solutions:</p>

<ul>
 <li>Grunt works in a very similar way to Gulp, except that it relies on tasks specified in a config file, rather than using written JavaScript. See <a href="http://gruntjs.com/getting-started">Getting started with Grunt for more details.</a></li>
 <li>You can also run tasks directly using npm scripts located inside your <code>package.json</code> file, without needing to install any kind of extra task runner system. This works on the premise that things like Gulp plugins are basically wrappers around command line tools. So, if you can work out how to run the tools using the command line, you can then run them using npm scripts. It is a bit trickier to work with, but can be rewarding for those who are strong with their command line skills.<a href="https://css-tricks.com/why-npm-scripts/"> Why npm scripts?</a> provides a good introduction with a good deal of further information.</li>
</ul>

<h2 id="Using_commercial_testing_services_to_speed_up_browser_testing">Using commercial testing services to speed up browser testing</h2>

<p>Now let's look at commercial 3rd party browser testing services and what they can do for us.</p>

<p>The basic premise with such applications is that the company that runs each one has a huge server farm that can run many different tests. When you use this service, you provide a URL of the page you want to test along with information, such as what browsers you want it tested in. The app then configures a new VM with the OS and browser you specified, and returns the test results in the form of screenshots, videos, logfiles, text, etc.</p>

<p>You can then step up a gear, using an API to access functionality programmatically, which means that such apps can be combined with task runners, such as your own local Selenium environments and others, to create automated tests.</p>

<div class="note">
<p><strong>Note</strong>: There are other commercial browser testing systems available but in this article, we'll focus on Sauce Labs and BrowserStack. We're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with.</p>
</div>

<h3 id="Sauce_Labs">Sauce Labs</h3>

<h4 id="Getting_started_with_Sauce_Labs">Getting started with Sauce Labs</h4>

<p>Let's get started with a Sauce Labs Trial.</p>

<ol>
 <li>Create a <a href="https://saucelabs.com/signup/trial">Sauce Labs trial account</a>.</li>
 <li>Sign in. This should happen automatically after you verify your e-mail address.</li>
</ol>

<h4 id="The_basics_Manual_tests">The basics: Manual tests</h4>

<p>The <a href="https://saucelabs.com/beta/dashboard/manual">Sauce Labs dashboard</a> has a lot of options available on it. For now, make sure you are on the <em>Manual Tests</em> tab.</p>

<ol>
 <li>Click <em>Start a new manual session</em>.</li>
 <li>In the next screen, type in the URL of a page you want to test (use <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html</a>, for example), then choose a browser/OS combination you want to test by using the different buttons and lists. There is a lot of choice, as you'll see! <img alt="" src="https://mdn.mozillademos.org/files/14229/sauce-manual-session.png" style="border-style: solid; border-width: 1px; display: block; height: 636px; margin: 0px auto; width: 600px;"></li>
 <li>When you click Start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose.</li>
 <li>When loading has finished, you can then start to remotely test the web site running in the chosen browser. <img alt="" src="https://mdn.mozillademos.org/files/14231/sauce-test-running.png" style="display: block; height: 390px; margin: 0px auto; width: 800px;"></li>
 <li>From here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. The top menu allows you to:
  <ul>
   <li>Stop the session</li>
   <li>Give someone else a URL so they can observe the test remotely.</li>
   <li>Copy text/notes to a remote clipboard.</li>
   <li>Take a screenshot.</li>
   <li>Test in full screen mode.</li>
  </ul>
 </li>
</ol>

<p>Once you stop the session, you'll return to the Manual Tests tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here you can download any screenshots you took , watch a video of the session, and view data logs for the session for example.</p>

<div class="note">
<p><strong>Note</strong>: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.</p>
</div>

<h4 id="Advanced_The_Sauce_Labs_API">Advanced: The Sauce Labs API</h4>

<p>Sauce Labs has a <a href="https://wiki.saucelabs.com/display/DOCS/The+Sauce+Labs+REST+API">restful API</a> that allows you to programmatically retrieve details of your account and existing tests, and annotate tests with further details, such as their pass/fail state which isn't recordable by manual testing alone. For example, you might want to run one of your own Selenium tests remotely using Sauce Labs, to test a certain browser/OS combination, and then pass the test results back to Sauce Labs.</p>

<p>It has several clients available to allow you to make calls to the API using your favourite environment, be it PHP, Java, Node.js, etc.</p>

<p>Let's have a brief look at how we'd access the API using Node.js and <a href="https://github.com/danjenkins/node-saucelabs">node-saucelabs</a>.</p>

<ol>
 <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>sauce-test</code> for example.</li>
 <li>Install the Node Sauce Labs wrapper using the following command:
  <pre>npm install saucelabs</pre>
 </li>
 <li>Create a new file inside your project root called <code>call_sauce.js</code>. give it the following contents:
  <pre class="brush: js">var SauceLabs = require('saucelabs');

var myAccount = new SauceLabs({
  username: "your-sauce-username",
  password: "your-sauce-api-key"
});

myAccount.getAccountDetails(function (err, res) {
  console.log(res);
  myAccount.getServiceStatus(function (err, res) {
    // Status of the Sauce Labs services
    console.log(res);
    myAccount.getJobs(function (err, jobs) {
      // Get a list of all your jobs
      for (var k in jobs) {
        if ( jobs.hasOwnProperty( k )) {
          myAccount.showJob(jobs[k].id, function (err, res) {
            var str = res.id + ": Status: " + res.status;
            if (res.error) {
              str += "\033[31m Error: " + res.error + " \033[0m";
            }
            console.log(str);
          });
        }
      }
    });
  });
});</pre>
 </li>
 <li>You'll need to fill in your Sauce Labs username and API key in the indicated places. These can be retrieved from your <a href="https://saucelabs.com/beta/user-settings">User Settings</a> page. Fill these in now.</li>
 <li>Make sure everything is saved, and run your file like so:
  <pre class="brush: bash">node call_sauce</pre>
 </li>
</ol>

<h4 id="Advanced_Automated_tests">Advanced: Automated tests</h4>

<p>We'll cover actually running automated Sauce Lab tests in the next article.</p>

<h3 id="BrowserStack">BrowserStack</h3>

<h4 id="Getting_started_with_BrowserStack">Getting started with BrowserStack</h4>

<p>Let's get started with a BrowserStack Trial.</p>

<ol>
 <li>Create a <a href="https://www.browserstack.com/users/sign_up">BrowserStack trial account</a>.</li>
 <li>Sign in. This should happen automatically after you verify your e-mail address.</li>
 <li>When you first sign in, you should be on the Live testing page; if not, click the <em>Live</em> link in the top nav menu.</li>
 <li>If you are on Firefox or Chrome, you'll be prompted to Install a browser extension in a dialog titled "Enable Local Testing" — click the <em>Install</em> button to proceed. If you are on other browsers you'll still be able to use some of the features (generally via Flash), but you won't get the full experience.</li>
</ol>

<h4 id="The_basics_Manual_tests_2">The basics: Manual tests</h4>

<p>The BrowserStack Live dashboard allows you to choose what device and browser you want to test on — Platforms in the left column, devices on the right. When you mouse over or click on each device, you get a choice of browsers available on that device.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15377/browserstack-test-choices-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 339px; margin: 0px auto; width: 700px;"></p>

<p>Clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15379/browserstack-test-device-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 841px; margin: 0px auto; width: 450px;"></p>

<div class="note">
<p><strong>Note</strong>: The blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator.</p>
</div>

<p>You'll find that you can enter URLs into the address bar, and use the other controls like you'd expect on a real device. You can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. Macbook). Note that not all features are available on all devices.</p>

<p>You'll also see a menu that allows you to control the session.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15381/browserstack-test-menu-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 636px; margin: 0px auto; width: 217px;"></p>

<p>The features here are as follows:</p>

<ul>
 <li><em>Switch</em> — Change to another platform/device/browser combination.</li>
 <li>Orientation (looks like a Reload icon) — Switch orientation between portrait and landscape.</li>
 <li>Fit to screen (looks like a full screen icon) — Fill the testing areas as much as possible with the device.</li>
 <li>Capture a bug (looks like a camera) — Takes a screenshot, then allows you to annotate and save it.</li>
 <li>Issue tracker (looks like a deck of cards) — View previously captured bugs/screenshots.</li>
 <li>Settings (cog icon) — Allows you to alter general settings for the session.</li>
 <li>Help (question mark) — Accesses help/support functions.</li>
 <li><em>Devtools</em> — Allows you to use your browser's devtools to directly debug or manipulate the page being shown in the test browser. This currently only works when testing the Safari browser on iOS devices.</li>
 <li><em>Device info</em> — Displays information about the testing device.</li>
 <li><em>Features</em> — Shows you what features the current configuration supports, e.g. copy to clipboard, gesture support, etc.</li>
 <li><em>Stop</em> — Ends the session.</li>
</ul>

<div class="note">
<p><strong>Note</strong>: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.</p>
</div>

<h4 id="Other_basic_features">Other basic features</h4>

<p>If you go back to the main BrowserStack page, you'll find a couple of other useful basic features under the <em>More</em> menu option:</p>

<ul>
 <li><em>Responsive</em>: Enter a URL and press <em>Generate</em>, and BrowserStack will load that URL on multiple devices with different viewport sizes. Within each device you can further adjust settings like monitor size, to get a good idea of how your site's layout works across different form factors.</li>
 <li><em>Screenshots</em>: Enter a URL, choose the browsers/devices/platforms you are interested in, then press <em>Generate screenshots</em> — Browserstack will take screenshots of your site in all those different browsers then make them available to you to view and download.</li>
</ul>

<h4 id="Advanced_The_BrowserStack_API">Advanced: The BrowserStack API</h4>

<p>BrowserStack also has a <a href="https://www.browserstack.com/automate/rest-api">restful API</a> that allows you to programmatically retrieve details of your account plan, sessions, builds, etc.</p>

<p>It has several clients available to allow you to make calls to the API using your favourite environment, be it PHP, Java, Node.js, etc.</p>

<p>Let's have a brief look at how we'd access the API using Node.js.</p>

<ol>
 <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>bstack-test</code> for example.</li>
 <li>Create a new file inside your project root called <code>call_bstack.js</code>. give it the following contents:
  <pre class="brush: js">var request = require("request");

var bsUser = "BROWSERSTACK_USERNAME";
var bsKey = "BROWSERSTACK_ACCESS_KEY";
var baseUrl = "https://" + bsUser + ":" + bsKey + "@www.browserstack.com/automate/";

function getPlanDetails(){
    request({uri: baseUrl + "plan.json"}, function(err, res, body){
        console.log(JSON.parse(body));
    });
    /* Response:
    {
        automate_plan: &lt;string&gt;,
        parallel_sessions_running: &lt;int&gt;,
        team_parallel_sessions_max_allowed: &lt;int&gt;,
        parallel_sessions_max_allowed: &lt;int&gt;,
        queued_sessions: &lt;int&gt;,
        queued_sessions_max_allowed: &lt;int&gt;
    }
    */
}

getPlanDetails();
</pre>
 </li>
 <li>You'll need to fill in your BrowserStack username and API key in the indicated places. These can be retrieved from your <a href="https://www.browserstack.com/automate">BrowserStack automation dashboard</a>. Fill these in now.</li>
 <li>Make sure everything is saved, and run your file like so:
  <pre class="brush: bash">node call_bstack</pre>
 </li>
</ol>

<p>Below we've also provided some other ready-made functions you might find useful when working with the BrowserStack restful API.</p>

<pre class="brush: js">function getBuilds(){
	request({uri: baseUrl + "builds.json"}, function(err, res, body){
		console.log(JSON.parse(body));
	});
	/* Response:
	[
		{
			automation_build: {
				name: &lt;string&gt;,
				duration: &lt;int&gt;,
				status: &lt;string&gt;,
				hashed_id: &lt;string&gt;
			}
		},
		{
			automation_build: {
				name: &lt;string&gt;,
				duration: &lt;int&gt;,
				status: &lt;string&gt;,
				hashed_id: &lt;string&gt;
			}
		},
		...
	]
	*/
};

function getSessionsInBuild(build){
	var buildId = build.automation_build.hashed_id;
	request({uri: baseUrl + "builds/" + buildId + "/sessions.json"}, function(err, res, body){
		console.log(JSON.parse(body));
	});
	/* Response:
	[
		{
			automation_session: {
				name: &lt;string&gt;,
				duration: &lt;int&gt;,
				os: &lt;string&gt;,
				os_version: &lt;string&gt;,
				browser_version: &lt;string&gt;,
				browser: &lt;string&gt;,
				device: &lt;string&gt;,
				status: &lt;string&gt;,
				hashed_id: &lt;string&gt;,
				reason: &lt;string&gt;,
				build_name: &lt;string&gt;,
				project_name: &lt;string&gt;,
				logs: &lt;string&gt;,
				browser_url: &lt;string&gt;,
				public_url: &lt;string&gt;,
				video_url: &lt;string&gt;,
				browser_console_logs_url: &lt;string&gt;,
				har_logs_url: &lt;string&gt;
			}
		},
		{
			automation_session: {
				name: &lt;string&gt;,
				duration: &lt;int&gt;,
				os: &lt;string&gt;,
				os_version: &lt;string&gt;,
				browser_version: &lt;string&gt;,
				browser: &lt;string&gt;,
				device: &lt;string&gt;,
				status: &lt;string&gt;,
				hashed_id: &lt;string&gt;,
				reason: &lt;string&gt;,
				build_name: &lt;string&gt;,
				project_name: &lt;string&gt;,
				logs: &lt;string&gt;,
				browser_url: &lt;string&gt;,
				public_url: &lt;string&gt;,
				video_url: &lt;string&gt;,
				browser_console_logs_url: &lt;string&gt;,
				har_logs_url: &lt;string&gt;
			}
		},
		...
	]
	*/
}

function getSessionDetails(session){
	var sessionId = session.automation_session.hashed_id;
	request({uri: baseUrl + "sessions/" + sessionId + ".json"}, function(err, res, body){
		console.log(JSON.parse(body));
	});
	/* Response:
	{
		automation_session: {
			name: &lt;string&gt;,
			duration: &lt;int&gt;,
			os: &lt;string&gt;,
			os_version: &lt;string&gt;,
			browser_version: &lt;string&gt;,
			browser: &lt;string&gt;,
			device: &lt;string&gt;,
			status: &lt;string&gt;,
			hashed_id: &lt;string&gt;,
			reason: &lt;string&gt;,
			build_name: &lt;string&gt;,
			project_name: &lt;string&gt;,
			logs: &lt;string&gt;,
			browser_url: &lt;string&gt;,
			public_url: &lt;string&gt;,
			video_url: &lt;string&gt;,
			browser_console_logs_url: &lt;string&gt;,
			har_logs_url: &lt;string&gt;
		}
	}
	*/
}</pre>

<h4 id="Advanced_Automated_tests_2">Advanced: Automated tests</h4>

<p>We'll cover actually running automated BrowserStack tests in the next article.</p>

<h2 id="Summary">Summary</h2>

<p>This was quite a ride, but I'm sure you can start to see the benefit in having automation tools do a lot of the heavy lifting for you in terms of testing.</p>

<p>In the next article, we'll look at setting up our own local automation system using Selenium, and how to combine that with services such as Sauce Labs and BrowserStack</p>

<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>

<p> </p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
 <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
</ul>

<p> </p>