Protractor Tutorial – Writing Our First Test Case

Time to Get Testy

We have now successfully installed Protractor and got all the tools we need to do the job. If you haven’t, jump on over to my other posts to learn what you need. I am going to walk you through the steps to write a very basic first test case. It will not have a lot of bells and whistles. It is just going to get the job done so that we can get an intro of how to run and write a Protractor test. Also, it will confirm that we have installed everything correctly.

Install Protractor
Tools

Note this post contains affiliate links. It doesn’t cost you anything extra to use these links, but it helps to support this blog.

Let’s write our first test case

We are going to need three things to start writing our test case.

1. Visual Studio Code
2. The console (ConEmu)
3. A web page to test

Create the file structure and starter files

Open your file explorer and navigate to where you want to store your code. Create folders so that it looks like this:

Now create two files.

• Under the “test” directory… create “test_spec.js”
• Under the “protractorTest” directory… create “conf.js”

Add starter code

We need to add to starter code to our conf.js file. Don’t worry, I will go over what this file and what the test_spec file do later. I just want us to get up and running first.

Add the following code to the conf.js file:

exports.config = {
  framework: 'jasmine2',

  // The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    // browserName: 'chrome'
    browserName: 'internet explorer'
  },

  // Tests (spec files) to be run
  specs: ['./test/test_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true // Use colors in the command line report.
  }
}

And add this code to the test_spec.js file:

describe('Protractor Demo Page', function () {
  it('should pass', function () {
    browser.ignoreSynchronization = true
    browser.get('https://glitchitsystem.com/protractor-demo')
  })

  it('should fail', function () {
    browser.ignoreSynchronization = true
    browser.get('https://glitchitsystem.com/protractor-demo')
    var name = 'Glitchy'
    element(by.id('nameFld')).sendKeys(name)

    element(by.id('submitBtn')).click()

    expect(element(by.id('welcomeText')).getText()).toEqual('Welcome to Protractor ' + name + '!')
  })
})

Run the test

Open up your ConEmu, you will need 2 tabs opened. Navigate to the “protractorTest” directory you created above.

On the first tab type “webdriver-manager start”.

On the second tab type “protractor conf.js”.

If everything is set up correctly and your code is the same as mine above, you should see a Chrome browser open, perform a few actions, then close. You should see the following on the console window.

Congrats! You have written and run your first test.

These posts are an introduction to Protractor for Automated Testing. To learn more with a full hands-on guide, grab our course on Udemy for only $9.99 when you use my link. Website Automation for Beginners with Protractor

Lesson 4: Coding Standards