Finding documentation on Selenium is hard enough for the “main languages” of Java or Python.    There are lots of examples of how to do things there in those languages but very little for the JavaScript libraries.   While you can translate most of the Java example to JavaScript there are some differences.    You’ll also find that there is a LOT of outdated information.    To make things more interesting you’ll also find that the older the example the more likely the code samples include browser or environment-specific methods.

Writing Selenium tests in JavaScript for Safari has very little documentation.   I decided to create my own cheat-sheet for future reference when I forget how I did this stuff.

Loading The “Nice To Have” Shorthands

It took me a little longer than it should have to figure out how to load up the shorthand notation for the webdriver libs so the example code provided would run outside the webdriver directory.

var webdriver = require('selenium-webdriver'),
    Builder = webdriver.Builder,
    By = webdriver.By,
    logging = webdriver.logging,
    until = webdriver.until;

This neat trick now allows the script to refence things like By.id() or until.titleIs() so that we can do things like click a button and then wait until the page title is “New Page Title” to pace our test scripts.

driver.get( config.url_for.dashboard )
    .then( _ => driver.findElement( { 'css' : '[type=submit]' } ).click() )
    .then(_ => driver.wait(until.titleIs('Dashboard ‹ Network Admin: My Store Locator Plus Sites — WordPress'), 1000))
    .then(_ => driver.quit())
    ;

Running Commands In Sequence

For many tests it is important to run the steps so that A finished before running B.    Opening a web page, clicking a button, then typing information into a form that was previously hidden for example.

The trick?  String together .then() methods.    I like to do this on a page get but it can also be done after nearly any webDriver command.    The simplified “on success” format works well in most cases to create a simple syntax:

driver.get( myslp_config.url_for.dashboard )
    .then( _ => driver.findElement( { 'id' : 'email'          } ).sendKeys( myslp_config.admin.user ) )
    .then( _ => driver.findElement( { 'id' : 'login-password' } ).sendKeys( myslp_config.admin.pwd  ) )
    .then( _ => driver.findElement( { 'css' : '[type=submit]' } ).click() )
    ;

Setting The Safari Window Size

The default window size for Safari while running in “Enable Remote Automation” mode is based on 1985 screen sizes.   I’ve not checked but it looks to be the size of 132 column x 80 row terminal or possibly the new-fangled 640×480 high resolution screens that came out when AOL first  came online.

I prefer to see more than a postage-stamp size view of my website when running testing.    You can set the window size after the driver is connected with the setSize() method.

driver.manage().window().setSize( 1200 , 800 );

Setting The Window Placement

For some reason Safari seems to like to throw the testing window near the bottom of the screen so it runs off the edge of the monitor.  If you like watching the tests run, especially during test development, this kind of sucks.   Force the position near the top-left of the screen with the setPosition() method.

driver.manage().window().setPosition( 100 , 100 );

Logging Things

You can console.log() the crap out of your test cases.    However most decent test suites have a logging utility.   Selenium does too and it is in webdriver.logging.     If you used the shorthand aliases above you can turn on the console handler then log every single detail to the console.

logging.installConsoleHandler();
logging.getLogger('webdriver.http').setLevel(logging.Level.ALL);

You’ll probably want to crank that down a few notches from 11, so you need to know the level names.   They are in the logging.js lib:

Level.OFF,
Level.SEVERE,
Level.WARNING,
Level.INFO,
Level.DEBUG,
Level.FINE,
Level.FINER,
Level.FINEST,
Level.ALL

At first glance, Level.DEBUG seems to be a good starting point for things but we’ll see how that goes as more complex tests are developed.

To log stuff at an “Info” level:

var log = logging.getLogger('webdriver.http');
logging.installConsoleHandler();
log.setLevel( logging.Level.DEBUG );
log.info( 'Gonna be starting somethin' );

…

Related

How to write reliable browser tests using Selenium and Node.js is a cool article on writing functional Selenium tests with Node.js.

Video Time

A short video on how this stuff looks on MacOS with Safari, phpStorm, and Selenium running in JavaScript with NodeJS.