-
Notifications
You must be signed in to change notification settings - Fork 0
/
multipleDevices.html
156 lines (135 loc) · 8.97 KB
/
multipleDevices.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>hljs.initHighlightingOnLoad();</script>
<title>Testing With Node by NickTulett</title>
</head>
<body>
<div id="container">
<div class="inner">
<header>
<h1>Using webdriver-sync on multiple devices</h1>
<h2></h2>
</header>
<!--
<section id="downloads" class="clearfix">
<a href="https://github.com/NickTulett/TestingWithNode/zipball/master" id="download-zip" class="button">
<span>Download .zip</span>
</a>
<a href="https://github.com/NickTulett/TestingWithNode/tarball/master" id="download-tar-gz" class="button">
<span>Download .tar.gz</span>
</a>
<a href="https://github.com/NickTulett/TestingWithNode" id="view-on-github" class="button">
<span>View on GitHub</span>
</a>
</section>
-->
<hr>
<section id="main_content">
<h2>
<a name="using-nodejs-a-an-automated-test-engine" class="anchor" href="#using-nodejs-a-an-automated-test-engine">
<span class="octicon octicon-link"></span>
</a>Running web tests on multiple devices</h2>
<p>Webdriver-sync can be used to drive tests on the local machine, on remote machines running their own webdriver implementation or on IOS and Android mobile devices. Note that the scripts themselves do not need to change for each environment, webdriver abstracts away from all the underlying differences.</p>
<h3>Running tests remotely.</h3>
<p>Normally you would instantiate a browser locally something like this:</p>
<pre><code class="javascript">
var wd = require("webdriver-sync");
var caps = new wd.DesiredCapabilities["chrome"]();
var driver = new wd["ChromeDriver"](caps);
</code></pre>
<p>To instantiate a browser on a remote machine (which has the appropriate webdriver installed) just include the machine's IP address and request a RemoteWebDriver:</p>
<pre><code class="javascript">
var wd = require("webdriver-sync");
var caps = new wd.DesiredCapabilities["internetExplorer"]();
var driver = new wd["RemoteWebDriver"]
("http://[remote machine ip address]:4444/wd/hub", caps);
</code></pre>
<h3>Running tests on IOS</h3>
<p>This is a bit more complicated. To run a test on an iPad for instance, you will need some Mac hardware running OSX. Connect the iPad using the USB cable.</p>
<p>You will need to enable developer mode on the iPad via Xcode on the Mac. In Xcode open the devices organiser, select the iPad and click "Use for Development"</p>
<p>Before running any tests, launch <a href="http://ios-driver.github.io/ios-driver/?page=setup">ios-server-standalone-n.n.n-SNAPSHOT.jar</a> in iTerm on the Mac with the -beta flag. You should now see the iPad connected via port 5555 (remember 4444 is already used for the local webdriver on the Mac).</p>
<p>You can now run tests on the iPad from the Mac (or any other machine using the remote driver option):</p>
<pre><code class="javascript">
var wd = require("webdriver-sync");
var caps = new wd.DesiredCapabilities["ipad"]();
var driver = new wd["RemoteWebDriver"]
("http://[Mac ip address]:5555/wd/hub", caps);
</code></pre>
<p>Sometimes you can see that the tests are running because there is output in iTerm but you can't see anything happen on the iPad. Just open another tab and you should be able to see the tests running.</p>
<p>Remember there is no local file system access on the iPad so there is no way to run tests involving uploading or downloading files.</p>
<p>If you don't have an iPad, you can use the same process to run the tests in IOS Simulator.</p>
<h3>Running tests on Android</h3>
<p>Install chromedriver and the Android SDK using <a href="https://sites.google.com/a/chromium.org/chromedriver/getting-started/getting-started---android">these instructions.</a></p>
<p>Attach the android device with USB and put it into developer mode using <a href="http://developer.android.com/tools/help/adb.html">the 7-tap method.</a></p>
<p>Then start the adb server and chromedriver on your development box.</p>
<pre><code class="bash">
adb start-server
./chromedriver
</code></pre>
<p>The android device will now be available as a RemoteWebDriver:</p>
<pre><code class="javascript">
var chromeOptions = new wd.ChromeOptions();
chromeOptions.setExperimentalOption("androidPackage", "com.android.chrome");
caps = new wd.DesiredCapabilities["chrome"]();
caps.setCapability("chromeOptions", chromeOptions);
driver = new wd["RemoteWebDriver"]("http://127.0.0.1:9515", caps);
</code></pre>
<p>You will see the correct port number to use in that last line when you start chromedriver.</p>
<p>The test will now run in Chrome on the android device</p>
<p>Note that some window methods will return errors, e.g. you cannot do this on android:</p>
<pre><code class="javascript">
driver.manage().window().maximize();
</code></pre>
<h3>Running tests in Chrome's Device Emulator</h3>
<p>Chrome Developer Tools has a device emulation mode that changes the screen dimensions and user agent string to reflect a mobile device. With a bit of work, we can exploit this in our scripts.</p>
<pre><code class="javascript">
var utils = require("webdriver-sync/src/utils");
//pass the device name in as a string, e.g "Apple iPhone 5"
var mobileDevice = utils.objectToMap({"deviceName": deviceName});
chromeOptions = new wd.ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileDevice);
caps = new wd.DesiredCapabilities["chrome"]();
caps.setCapability("chromeOptions", chromeOptions);
driver = new wd["ChromeDriver"](caps);
</code></pre>
<p>Chrome will now open but switched to the chosen device emulation mode.</p>
<p>Note that this means you will have to adapt your scripts to cope with hamburger menus.</p>
<h3>Network throttling with ChromeDriver</h3>
<p>ChromeDriver 2.24 provides the ability to set network conditions as seen in the Developer Tools device tab.</p>
<p>The interface is not exposed yet in webdriver-sync but with a bit of work, we can access the settings via the JSON Wire Protocol.</p>
<pre><code class="javascript">
var sh = require("child_process").execSync;
function setNetwork(networkType) {
var sessId = driver.getSessionId().toString();
console.log("SESSION " + sessId);
var port = sh("netstat -ltpn | grep chromedriver").toString().match(/127.0.0.1:(\d+)/)[1];
console.log("PORT " + port);
console.log("SETTING NETWORK TO " + networkType);
sh(`wget -q -O- http://localhost:${port}/session/${sessId}/chromium/network_conditions
--post-data='{"network_name": "${networkType}"}'`);
};
//we need to test using a mobileDevice as set up above with an additional capability:
caps.setCapability("networkConnectionEnabled", true);
</code></pre>
<a href="enhancedScripts.html">Next: Readable test scripts</a>
</section>
<footer>
<a href="/TestingWithNode/">Testing With Node</a> is maintained by <a href="https://github.com/NickTulett">NickTulett</a>
<br>This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
</footer>
</div>
</div>
</body>
</html>