October 18, 2016

Testing The-Internet with Geb + Groovy + Spock: About Yeoman, scaffolding, and other build tools

Have you ever needed to set up a brand-new project but were not sure where to start? I am like that right now!

For the past week, I have been trying to figure out how I wanted to set up the file and folder structure for a new Geb + Groovy + Gradle + Spock project. I was going to go back to Dave Haeffner's test site, The-Internet ( link ) and take a look at writing a test for his login page:

  • Geb (pronounced "jeb") is a mash-up of jQuery, Selenium WebDriver, with the Page Object Model, Reporting, and taking Snapshots built in. 
  • Groovy is a scripting language language that I covered before in my blog, specifically when talking about using Gradle for build.gradle configurations. 
  • Gradle does a lot more than handle installing third-party dependencies such as Chromedriver when you want to spin up a new Chrome browser on your local machine. With Gradle, you can set up tests to be kicked off on the command line, just waiting to be fed into a continuous integration environment such as Jenkins.  
  • The Spock Framework follows a Given / Then / When / Expect framework found in Cucumber's Gherkin language format that is usually paired with Ruby
But how do I set all these tools up if I want to test ? How to get them all to work together?

Should I just repurpose Sauce Labs Test Framework, Groovy-Geb-Spock-Selenium at https://github.com/saucelabs-sample-test-frameworks/Groovy-Geb-Spock-Selenium?

A new co-worker of mine referred me to a tool he had heard of at a previous job that may help: Yeoman.io.

In the next blog article, we will be borrowing heavily from "Let's Scaffold a Web App" written by Mehdy Dara ( Github: zckers ) to walk through setting up your Mac or PC for Yeoman. We will also walk through installing a Geb Generator for Yeoman created by Chris Hluchan ( LinkedIn ), a Software Engineer at Google, formerly at Oracle. This will set up the project's scaffolding.

Later articles will talk about about:

  • Diving into the scaffolding code that has been generated, figuring out how it works
  • How to set up the Gradle configuration file to be able to run tests in parallel
  • Customizing the scaffolding to work with a login page
  • How Geb works with Selenium WebDriver: entering text, clicking buttons, and capturing web elements in page objects. 
This blog article will talk a bit about the history of the Yeoman tool. 

What is Scaffolding?

According to Wikipedia:
"Scaffolding is a technique supported by some model–view–controller frameworks, in which the programmer can specify how the application database may be used. The compiler or framework uses this specification, together with pre-defined code templates, to generate the final code that the application can use to create, read, update and delete database entries, effectively treating the templates as a 'scaffold' on which to build a more powerful application.

"Scaffolding is an evolution of database code generators from earlier development environments, such as Oracle's CASE Generator, and many other 4GL client-server software development products.

"Scaffolding was made popular by the Ruby on Rails framework. It has been adapted to other software frameworks" 
According to Yeoman.io, "Scaffolding, in the Yeoman sense of the word, means generating files for your web app based on your specific configuration requests. In this step, you'll see how Yeoman can generate files specifically for your favorite library or framework — with options for using other external libraries like Webpack, Babel and SASS — with minimal effort". - Yeoman's Codelab for the Scaffold-app.

About Yeoman and other Build Tools

Yeoman.io is an open-source project sponsored by the Google Chrome Developer Relations team, such as Addy Osmani ( blog ), Paul Irish ( blog ). Can't find a way to generate the exact combination you need to scaffold your software project, or web application? You can use their toolset to write your own! Yeoman has 1.3 million total installs and 1635 community generators.

Yeoman was first rolled out at Google I/O 2012.

Google I/O, Better Web App Development Through Tooling
Paul Irish, June 28, 2012
48 minutes

"Building a solid webapp is a challenge for all developers, but a plethora of tools have emerged recently to assist you. From starting boilerplates, to performance tuning and build tools, you'll get a full overview of the tooling ecosystem. In this session, you'll learn which mature and valuable open source projects can save you time as well as get answers to common questions in building a webapp".

... Please note: Google moves so fast that the above video is posted more as a history lesson than anything else.

If you want something a bit more recent, there is...

Totally Tooling Tips:
Build Processes (S2, Ep 2), Nov 25, 2015
Addy Osmani & Matt Gaunt

6:00 minutes

"A build process is vital to any web front end project, it saves you time, implements best practice with ease and is easy to set up with all the existing boilerplate projects. Matt & Addy discuss the main projects and how they use a build process on a day to day basis".

In the next few blog entries, we will install Yeoman from the Node Package Manager, set up a Geb generator, and examine the code produced.

Testing The-Internet with Geb + Groovy + Spock:

Until then, Happy Testing!

-T.J. Maher
Twitter | LinkedIn | GitHub

// Sr. QA Engineer, Software Engineer in Test, Software Tester since 1996.
// Contributing Writer for TechBeacon.
// "Looking to move away from manual QA? Follow Adventures in Automation on Facebook!"

No comments: