Wanna test? Mac Edition

[2018-04-13 – update – this article has been updated to use ChromeDriver]

Yay! Testing! My beloved pet peeve!

When I wrote the step by step article on how to set up for testing on Windows, I optimistically and somewhat dismissively wrote I am 100% sure you can easily show your friendly marketer how to do all of this on her Mac if she has one.

Turns out I will run a lab at the Adobe Summit in Las Vegas in March, and it is highly likely the machines we use will be Macs. So all of a sudden, I find myself in the situation where I have to actually tell our lab admins what I need. And since it is not quite so straight forward, I take this opportunity to note it down for you, too.

This article shall follow the Windows-equivalent closely.

Prerequisites

As on Windows, your friendly marketer needs a couple of things on her Mac, too:

• phantomJS
• Chrome Canary
• git
• Maven
• selenium webdriver
• PhantomJSDriver
• ChromeDriver
• selenium Java bindings
• a JDK

Some of these things are present on your average Mac, like git and maybe the JDK.

If you want to test you have both, try the following commands in a terminal window:

java -version and git --version

You should see something like this:

(Tip: if installing a JDK doesn’t help and you get error messages when you call java -version, try installing NetBeans)

For the rest, we start with a quick detour — we shall install Homebrew, since my developer colleagues here at Adobe say that’s the easiest way to install the rest.

Install Homebrew

Do you need to install Homebrew?

Try this command in a terminal window:

brew --version

If you get an error, install Homebrew.

Open a terminal, then copy and paste a single line into that and hit enter.

This is the line you need to copy and paste (but you might want to check the Homebrew page, see if it is still this exact line):

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Now try that test above again. Works? Cool.

Install Maven

Since we’re using Homebrew, this is almost ridiculously easy.

Open a terminal window (actually, why not keep it open? We have used it so many times by now, and we surely will use it again), then type:

brew install maven

Homebrew will do its thing, and you’ll see something like this:

Did it work?

Install PhantomJS

The same goes for PhantomJS: Homebrew can easily handle that. The command is:

brew install phantomjs

And the result should look like this:

Did it work?

Install Chrome & ChromeDriver

Download and install Chrome Canary. While you could test with your standard Chrome, I would use Canary as a fresh, non-customised, raw testing tool.

Homebrew can handle ChromeDriver. The command is:

brew install chromedriver

If you have done it correctly, typing

chromedriver --version

should lead to this:

Download the Tests

I suggest you create yourself a folder and work inside it. I call mine “dev”.

mkdir dev

Change into that folder:

cd dev

Now checkout the test framework using git:

git clone https://github.com/janexner/site-infrastructure-tests

Watch git download some stuff.

Test!

(From this point on, I have simply copied the other article, and replaced screenshots where necessary. I used to be a developer a long time ago, I earned the right to be lazy.)

In your command prompt, change into the correct folder:

cd site-infrastructure-tests

Then, run your first ever test simply by typing

mvn test -Dwebdriver.chrome.driver=/usr/local/bin/chromedriver

You’ll see a lot of activity in that window. The first time round, Maven needs to download some stuff, build the test framework, and then run the tests. Subsequent test runs will be faster, I promise!

A successful test run would look like this:

What next?

The test framework is now setup and working. From here, you can start building your own tests.

The best way to do that is to take it slow. Start with an empty test description file and add tests, one at a time.

Here’s a simple file you could start with, just replace the URL with one you want to test.

{
    "name": jan-exner.de",
    "pagesToTest": [
        {
            "pageURL": "http://www.jan-exner.de/",
            "jQueryLoaded": true,
        },
    ]
}

All it does is test whether jQuery is actually loaded on that page.

The other tests that you can add are documented on github.

In order to test with your file, you need to tell the framework the file name. You can do that like so:

If your test file is called “mytests.json”, you’d run

mvn test -Dwebdriver.chrome.driver=/usr/local/bin/chromedriver -Dtest.description.file=mytests.json

Simple.

By the way: editing a JSON file with Text Edit is not cool. I suggest you use a better editor. Which one works for you is very much a question of personal taste. Some editors that you might want to try:

• Brackets is free, and built by Adobe
• Sublime Text is what I use (yes, I paid for it, it’s so good)

And then?

When you have built a test file that works for you, I suggest you automate.

Now when I say “you” in this post, I mean either you, the developer, or you, the friendly marketer.

In the “What next?” chapter, the “you” is likely the friendly marketer or an analytics team member. But now we’re back to “you”, the developer.

I am counting on you (yes, you!) to integrate the test framework into your usual integration or regression tests. These should run every time before you go live with a new version of your site!