Set up your GitHub repository with a README.md and .gitignore file
npm init -y
npm install protractor --save-dev
npm install protractor-beautiful-reporter --save-dev
npm install jasmine-data-provider --save-dev
Then create your framework by creating a test folder and then adding:
A page_objects folder.
A products folder.
You can add the ESLint library and plugins to this framework if you'd like, as we did on the course. The underlying test framework protractor uses is jasmine (rather than the mocha and chai we used on the course) so add plugins for this.
then create your protractor.conf.js in tests and add this code:
var HtmlReporter = require('protractor-beautiful-reporter');
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
baseUrl: 'http://automate.safebear.co.uk:8080/',
capabilities: {
'browserName': 'chrome'
},
// multiCapabilities: [{
// 'browserName': 'firefox'
// }, {
// 'browserName': 'chrome'
// }]
// capabilities: {
// browserName: 'chrome',
// chromeOptions: {
// args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
// }
// }
// run a group of tests
specs: ['products/*.spec.js'],
suites: {
products: 'products/*.spec.js'
},
framework: 'jasmine',
onPrepare: function() {
// Add a screenshot reporter and store screenshots to `/tmp/screenshots`:
jasmine.getEnv().addReporter(new HtmlReporter({
baseDirectory: 'tmp/screenshots',
docTitle: 'Products Report'
}).getJasmine2Reporter());
}
};Then update your test script in package.json to the following:
"scripts": {
"test": "protractor ./test/protractor.conf.js"
},Copy the contents of your page_objects folder from the cucumber framework into the page_objects folder for this one (we won't recreate this again!)
Then create your spec file to create a product (products_crud.spec.js) in the products folder with the following code:
const homePage = require('../page_objects/home.page');
const addProductPage = require('../page_objects/add-product.page');
const viewProductPage = require('../page_objects/view-product.page');
beforeEach(function() {
browser.get('');
});
it('should create a product', function(){
// click add products
homePage.addProduct.click();
// fill out form
addProductPage.productName.sendKeys("turbot")
addProductPage.productDescription.sendKeys("fish")
addProductPage.productPrice.sendKeys("100")
// click submit
addProductPage.submitButton.click()
// check product name
expect(viewProductPage.productName({name:"turbot"}).isDisplayed()).toBeTruthy();
})Then run your code with the npm test command.
Add a data folder in your test folder.
Then create a product-data.module.js file in your data folder and add the following:
'use strict';
module.exports = {
productInfo: {
'meat': {
name: 'sausages',
description: 'thin meat',
price: '100'
},
'vegetables': {
name: 'carrots',
description: 'orange vegetables',
price: '200'
},
'bread': {
name: 'bloomer',
description: 'white bread',
price: '300'
},
'pasta': {
name: 'spaghetti',
description: 'long pasta',
price: '400'
}
}
};And then adapt the spec (products_crud.spec.js) code to the following (see the TEST DATA comments in the code):
const homePage = require("../page_objects/home.page");
const addProductPage = require("../page_objects/add-product.page");
const viewProductPage = require("../page_objects/view-product.page");
// TEST DATA: Import our test data module and the 'jasmine data provider' 'using' command to handle our test data
var using = require("jasmine-data-provider");
var products = require("../data/product-data.module.js");
// TEST DATA: Add a 'describe'
describe("productTests", function() {
beforeEach(function() {
browser.get("");
});
// TEST DATA: Add your 'using' to use our test data
using(products.productInfo, function(product, description) {
it("should create a product" + description, function() {
// Should be a check that a product doesn't exist here.
// click add products
homePage.addProduct.click();
// fill out form
// TEST DATA: Update with test data (product)
addProductPage.productName.sendKeys(product.name);
addProductPage.productDescription.sendKeys(product.description);
addProductPage.productPrice.sendKeys(product.price);
// click submit
addProductPage.submitButton.click();
// check product name
// TEST DATA: Update with test data (product)
expect(viewProductPage.productName(product).isDisplayed()).toBeTruthy();
});
});
});Run the code with the npm test command. You can run your code headlessly and plug it into Jenkins in exactly the same way you did on the course.