Getting started with CodeceptJS – Modern era acceptance testing – Part 3

Welcome to the 3rd installment in this series of Getting Started with CodeceptJS. In this part, we will continue on from where we left off, and complete the test for the Google Search functionality.

Before we begin, we are going to run one command which will make our lives much easier, and give us access to intellisense when writing our tests:

codeceptjs def

Once you’ve run this you will notice a new file in your directory, called steps.d.ts, which references all the interfaces we have available.

If we add a reference to this file at the top of our googleHomepage_test.js like this:

/// <reference path=”./steps.d.ts”

We should notice a new behaviour when we type “I.”:

Now that is in place we can begin writing the search test. So we need to carry out three actions – type some text into the search field, click the google search button, and assert that the first search result contains the text we expect.

I.amOnPage('/')
I.fillField('#lst-ib', 'CodeceptJS')
I.wait(3)
I.click('Google Search')
I.see('CodeceptJS', '.r a')

So this is an example of the code I’ve written. We are still using I.amOnPage with the default root, and now we have four more lines of code.

The first is fillField, which is typing the text ‘CodeceptJS’ into the search bar, which has the selector ‘#lst-ib#. The next step is waiting 3 seconds for the drop down list to populate before clicking on the element which contains the text ‘Google Search’. The last step is asserting that we see the text ‘CodeceptJS’ in the element with selector ‘.r a’.

(if you need help finding elements, this chrome extension called SelectorGadget is quite helpful – http://selectorgadget.com/)

Now let’s run the test and see how it looks:

Nice one, all working and we have a complete scenario with a passing test. Now we have everything we need to continue building our automation project – we have access to all the interfaces/actions we need, we know how to find the elements, and we now how to run our tests.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: