How to perform beforeTest and afterTest method using typescript (protractor+cucumber) - protractor

Framework used - Protractor
BDD - Cucumber
Language - Typescript
Now i have implemented the framework and a test scenario is also running fine with protractor.
But the problem i am facing is when i write another cucumber scenario my test fails saying 'A session is either terminated or not started'
The above failure is because when my first cucumber scenario starts the appium server starts with in my config and at the end i close the server/driver
Now i have written another test scenario, since cucumber is independent of each scenario , when the sec starts it does not do the config again. Now i need a beforeTest method to call.
So i am not sure how to implement that in typescript,as i am new to it.
Tried the same concept of java way but not working out. There where examples for javascript but still did not help me out.
Tried creating a new util folder and placing my beforeTest inside that but the function is not calling there
Tried to use beforeLaunch()with in my config file, but still does not work out
my config file: config.ts
export let config: Config = {
allScriptsTimeout: 40000,
getPageTimeout: 40000,
setDefaultTimeout: 60000,
defaultTimeoutInterval: 30000,
specs: [
// '../../utils/beforeEach.ts',
'../../features/*.feature',
],
onPrepare: () => {
Reporter.createDirectory(jsonReports);
tsNode.register({
project: './tsconfig.json'
});
},
multiCapabilities: [
androidPixel2XLCapability,
// iPhoneXCapability
],
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
cucumberOpts: {
compiler: "ts:ts-node/register",
glue: ["steps"],
format: [
"json:./reports/json/cucumber_report.json",
],
require: ['supports/timeout.js', '../../stepdefinitions/*.ts'],
tags: "#firstPurchasePopup",
},
seleniumAddress: serverAddress,
onComplete: () => {
Reporter.createHTMLReport();
},
// =====
// Hooks
// =====
beforeTest: function () {
},
beforeLaunch(){
console.log("Before");
seleniumAddress: 'http://localhost:4723/wd/hub';
},
afterLaunch() {
console.log("After");
},
};
my other beforeEach.ts:
This is not working but what i tired and was not working.
import {After, AfterAll, Before} from "cucumber";
const serverAddress = 'http://localhost:4723/wd/hub';
import {beforeEach, afterEach, describe} from "selenium-webdriver/testing";
beforeEach(function () {
console.log("Before");
});
// });
afterEach(function () {
console.log("Before");
});
// let beforeEach: () => void;
// beforeEach = () => {
// console.log("Before Test");
// // config.multiCapabilities;
// seleniumAddress: serverAddress;
// };
//
// let afterEach: () => void;
// afterEach = () => {
// console.log("After Test");
// };
This is my feature file: bonus.feature
this is my feature file:
Background:
Given I launch the app
Then I should see the popup window for the Bonus
And I verify the UI
Then I tap on ok button
And The popup window should not be seen
#firstPurchasePopup
Scenario: firstPurchasePopup new join button
When I tap on the 'New ' button
And The popup window should not be seen
Then I navigate back from join page to home page
Then The popup window should not be seen
Then I close the app
#firstPurchasePopup
Scenario: firstPurchasePopup login button
And I tap on log in button on the initial screen
Then I navigate back from login page to home page
And The popup window should not be seen
Then I close the app
I expect my the scenario what i have written to execute both one after the other , like execute Scenario: firstPurchasePopup new join button which it does . But when it launches the app again for the sec Scenario: firstPurchasePopup login button does not work as the driver is not started again, since it was closed in prev one.
to start it i need to create beforeTest which i am facing difficutly to write the code

I haven't used Protractor with Cucumber, but I have used Cucumber & Typescript together. I resolved the problem by having a file cucumber.js in a root that is being loaded at the very beginning by default and looks like that:
var settings = "features/**/*.feature -r step-definitions/**/*.ts -r hooks/**/*.ts -r support/**/*.ts "
module.exports = {
"default": settings
}
However, I think in your case the solution would be adding a path to hooks file to config.cucumberOpts.require list instead to config.specs one.
Did you try it?

#All
Thanks for your inputs #mhyphenated
I figured out that the rather than using inside the config, i tried using the before and after in the hooks.ts ,also other than calling the server i was not actually calling the android driver, as below and that worked
beforeTest: function () {
beforeTest: function () {
},
beforeLaunch(){
console.log("Before");
seleniumAddress: 'http://localhost:4723/wd/hub';
},
hooks.ts
import { AndroidDriver } from "appium/node_modules/appium-android-driver";
let driver:AndroidDriver, defaultCaps;
driver = new AndroidDriver();
Before(function () {
// This hook will be executed before all scenarios
browser.ignoreSynchronization = false;
browser.manage().timeouts().implicitlyWait(500);
let defaultCaps = config.multiCapabilities[0];
console.log("defaultCaps = ", defaultCaps );
driver.createSession(defaultCaps);
driver.defaultWebviewName();
});

Related

Protractor : not able to find element in login page

I am novice user of protractor and trying to use it for angularjs application,
Config file snippet :
exports.config = {
directConnect: true,
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
specs: ['plugins/./test_spec.js'],
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 1240000
}
};
Working test case (spec file):
describe('Login', function () {
it('Login Page', function () {
browser.get('http://localhost:9000/apps/admin/');
element(by.model('ctrl.user.name'))
element(by.model('ctrl.user.password'))
expect(true).toBe(true)
});
});
Failing test case (spec file):
describe('Login', function () {
it('Login Page', function () {
browser.get('http://localhost:9000/apps/admin/');
element(by.model('ctrl.user.name')).sendKeys("test1");
element(by.model('ctrl.user.password')).sendKeys("test1");
element(by.css('[type="submit"]')).click();
expect(true).toBe(true)
});
});
Trying to use sendKeys for login page is failing but without sendkeys test case passes, I am getting following error:
Failed: script timeout: result was not received in 60 seconds
(Session info: chrome = 72.0.3626.109)
(Driver info: chromedriver = 2.46.628402(536cd7adbad73a3783fdc2cab92ab2ba7ec361e1), platform = Windows NT 10.0.17134 x86_64)
I suspect element not being found.
Please guide me through this.
Thanks in Advance
I highly recommended to add SELENIUM_PROMISE_MANAGER: false, to your protractor.config file due to this thread, if tells it shortly - better to don't use Control Flow. So how will look your config file:
exports.config = {
directConnect: true,
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
specs: ['plugins/./test_spec.js'],
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 1240000
},
SELENIUM_PROMISE_MANAGER: false,
};
After it you should update your tests (all actions that returns promise should resolve it, I prefer async ... await style). Also, your expect true is useless, let get rid off it, and add some explicit waiters.
describe('Login', () => {
it('Login Page' async () => {
await browser.get('http://localhost:9000/apps/admin/');
const name = element(by.model('ctrl.user.name'));
await browser.wait(ExpectedConditions.elementToBeClickable(name), 10000);
await name.sendKeys("test1");
const password = element(by.model('ctrl.user.password'));
await browser.wait(ExpectedConditions.elementToBeClickable(password), 10000);
await password.sendKeys("test1");
element(by.css('[type="submit"]')).click();
expect(true).toBe(true)
});
});
Also, It would be better to find locators using CSS. Update your question with what error this test will fail.
Protractor is wrapper on selenium, thus when you are plainning to use await/async methods just disable the SELENIUM_PROMISE_MANAGER by setting it as false, so that the protractor promises work well with async/await methods.
I also suggest using pagemodel design pattern which will make the code much readable.
enter code here
export class loginPageObject{
public emailTextBox: ElementFinder;
public passwordTextBox: ElementFinder;
public signInButton: ElementFinder;
public errorMessage: ElementFinder;
constructor(){ //this.emailTextBox = $("input[type='email']");
//this.emailTextBox = element(by.css("body > app-root > div > app-login > div > div > form > div > input"));
this.emailTextBox = $("input[type='email']");
this.passwordTextBox = $("input[type='password']");
this.signInButton = $("button[type='submit']");
this.errorMessage = $("span");
}
}
above is one such sample .. later on you can use it like following way

ScriptTimeoutError: Timed out - From: Task: Protractor.waitForAngular()

I am trying to run basic end to end tests written using protractor. I always get this error.
ScriptTimeoutError: Timed out
I checked this link https://github.com/angular/protractor/blob/master/docs/timeouts.md and increased the default timeout, but still I get the same error. I am not able to figure out from where this error pops out. The browser loads the base Url, later it will not perform any action as mentioned in the test. The test is very simple , open the browser and click on the menu and verify if the URL is matched.
Node Version: v7.5.0
Protractor Version: 5.1.2
Angular Version: 2.4.10
Browser(s): firefox
Operating System and Version ubuntu
typescript: 2.2.2
Config file
exports.config = {
framework: 'jasmine2',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['test/e2e/menu.js'],
capabilities: {
'browserName': 'firefox',
},
baseUrl: 'http://localhost:8100/#/',
//allScriptsTimeout: 360000,
jasmineNodeOpts: {
showColors: true,
// defaultTimeoutInterval: 360000
},
//useAllAngular2AppRoots:true,
//menu.js
describe('menu check', function () {
beforeEach(function () {
browser.get('http://localhost:8100/#/');
browser.waitForAngular();
// browser.driver.manage().timeouts().setScriptTimeout(60000);
});
it('Should route to the operationalView page from menu', function () {
element(by.css('[href="#/operationalView"]')).click();
expect(browser.getCurrentUrl()).toMatch('http://localhost:8100/#/operationalView');
});
it('Should route to the worldlview page from menu', function () {
element(by.css('[href="#/worldView"]')).click();
expect(browser.getCurrentUrl()).toMatch('http://localhost:8100/#/worldView');
});
});
I have had this issue once, which I resolved using
browser.ignoreSynchronization=true
before the beforeEach() method in your Protractor spec files. This makes Protractor not wait for Angular promises, such as those from $http or $timeout to resolve. You can try this in your script.
Edit : As of today, 08/16/19, this solution has been deprecated. Use waitForAngularEnabled to be false instead.

Timed out waiting for Protractor to synchronize with the page after 11 seconds

I am new to Protractor and have been trying to run end to end test. I have tried other respondent but still i am getting the above error
My protractor conf.js looks like this:
directConnect: true,
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 2500000,
getPageTimeout: 30000,
print: function() {}
},
spec.js looks like this
describe('b2-bportral standardOrder', function () {
let onlineOrderPage: OnlineOrderPage;
let loginPage: LoginPage
beforeEach(() => {
browser.driver.manage().window().maximize();;
loginPage = new LoginPage();
loginPage.navigateTo();
loginPage.setUserName("canon#gmail.com");
loginPage.setPassword("a");
loginPage.loginClick();
onlineOrderPage = new OnlineOrderPage();
onlineOrderPage.navigateTo();
browser.waitForAngular();
});
it('Standard Order', () => {
onlineOrderPage.setPartnerName("");
});
});
po.ts looks like this :
export class LoginPage {
navigateTo() {
return browser.get('#/login',30000);
}
setUserName(username:string) {
element(by.id("username")).sendKeys(username);
}
setPassword(password:string) {
element(by.id("password")).sendKeys(password);
}
loginClick(){
return element(by.className("login")).click();
}
}
export class OnlineOrderPage {
navigateTo() {
browser.get('url',30000);
}
setPartnerName(value:string){
element(by.id('selPartnerName')).click();
return element(by.cssContainingText('option', 'CANON MIDLE EAST')).click();
}
}
Error:
b2-bportral standardOrder
× Standard Order
- Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
- Failed: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md
While waiting for element with locator - Locator: By(css selector, *[id="selPartnerName"])
Anyone please guide me
Protractor tries to load your page, but it timeouts before it can fully load it. There are two possiblities. First make sure you specified correct URL for your page and that your page actually starts to load before timeouting.
Secondly you can increase the timeout for loading page (default is 10) in two ways:
In your configuration file set getPageTimeout: 30000 to increase
timeout for every browser.get()
Specify timeout for each individual function with parameter, for
example: browser.get("url", 30000); Note that browser.driver.get() uses only 1 parameter, so be sure to use browser.get().
Also if above solutions don't work for you, you may want to try setting timeout for webdriver. You can set it in configuration file with this line: allScriptsTimeout: 30000
All values are in milliseconds
EDIT:
First of all put browser.pause() and when it pauses look at the browser and see if element with id selPartnerName really exists.
If it exists try waiting for it longer with this code:
var el = element(by.id('selPartnerName'));
var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(el), 30000);

browserify/karma/angular.js "TypeError: Cannot read property '$injector' of null" when second test uses "angular.mock.inject", "currentSpec" is null

I have an Angular.js app and am experimenting with using it with Browserify. The app works, but I want to run tests too, I have two jasmine tests that I run with karma. I user browserify to give me access to angular.js and angular-mocks.js and other test fixtures within the tests.
Versions are:-
"angular": "^1.4.0",
"angular-mocks": "^1.4.0",
"browserify": "^10.2.3",
"karma": "^0.12.32",
"karma-browserify": "^4.2.1",
"karma-chrome-launcher": "^0.1.12",
"karma-coffee-preprocessor": "^0.2.1",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4",
If I run the tests individually (by commenting one or the other from the karma.conf file) they both work OK. (yey!)
But if I run them both I get this error
TypeError: Cannot read property '$injector' of null
at Object.workFn (/tmp/3efdb16f2047e981872d82fd8db9c0a8.browserify:2272:22 <- node_modules/angular-mocks/angular-mocks.js:2271:0)
looking at line 2271 of the angular.mocks.js It reads
if (currentSpec.$injector) {
So clearly currentSpec is somehow now null.
I have isolated the problem to when I call "angular.mock.inject" in the second test.
beforeEach(angular.mock.inject(function (_GridUtilService_) {
gridUtilService = _GridUtilService_;
}));
If I comment this out it works, but obviously I can't then run a test n my gridUtilService.
Does anyone know how to run two (or more :-) angular-mock jasmine tests with karma and browserify?
below are my tests, karma.conf file. the Angular services work when deployed but for this purpose they can simply be dumb services that do nothing.
karma.conf:-
// Karma configuration
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['browserify', 'jasmine'],
// list of files / patterns to load in the browser
files: [
'src/main/assets/js/**/*.js',
// 'src/test/**/*.js'
'src/test/services/SettingUtil*.js',
'src/test/services/GridUtil*.js'
],
// list of files to exclude
exclude: [
'src/main/assets/js/**/app-config.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/main/assets/js/**/*.js': ['browserify'],
'src/test/**/*.js': ['browserify']
},
browserify: {
debug: true,
extensions: ['.js', '.coffee', '.hbs']
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
// browsers: ['PhantomJS', 'Chrome'],
// browsers: ['PhantomJS'],
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
src/test/services/SettingUtilServiceTest.js:
'use strict';
describe("SettingUtilServiceTest.", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
require('angular');
require('angular-mocks');
// can't do below see error at https://github.com/xdissent/karma-browserify/issues/10
//beforeEach(module('dpServices'));
//so need todo this
beforeEach(angular.mock.module('dpServices'));
var fixtures = require('./serviceFixtures.js');
var sus = fixtures.settingUtilServiceTestFixtures;
var ts1 = sus.tablesetting1;
var ts2 = sus.tablesetting2;
var settingUtilService;
beforeEach(angular.mock.inject(function (_settingUtilService_) {
settingUtilService = _settingUtilService_;
}));
it('should return an object containing mins and maxs from function minMaxes()', function() {
expect(ts1).toBeDefined();
expect(ts2).toBeDefined();
var minMaxs = settingUtilService.minMaxs(ts1);
var mins = minMaxs.mins;
expect(mins).toBeDefined();
var maxs = minMaxs.maxs;
expect(maxs).toBeDefined();
});
});
src/test/services/GridUtilServiceTest.js:
'use strict';
describe("GridUtilServiceTest.", function() {
it("is a set of tests to test GridUtilService.", function() {
expect(true).toBe(true);
});
require('angular');
require('angular-mocks');
// can't do below see error at https://github.com/xdissent/karma-browserify/issues/10
// beforeEach(module('dpServices'));
//so need todo this
beforeEach(angular.mock.module('dpServices'));
var fixtures = require('./gridFixtures.js');
var gridFix = fixtures.gridUtilServiceTestFixtures;
var ts1 = gridFix.tablesetting1;
var ts2 = gridFix.tablesetting2;
var ts3 = gridFix.tablesetting3;
var gridUtilService;
beforeEach(angular.mock.inject(function (_GridUtilService_) {
gridUtilService = _GridUtilService_;
}));
it('should return an object containing mins and maxs from function minMaxes()', function() {
expect(ts1).toBeDefined();
expect(ts2).toBeDefined();
expect(ts3).toBeDefined();
});
});
If you need access to the angular setup I can provide it (split into multiple files using browserify's require() function and built with gulp... but as I say the app runs ok and the tests only fail when there are two tests, so I think the issue is with karma-jasmine and angular-mocks or overwriting the currentSpec variable.
If anyone knows how to split my angular tests into multiple tests (I don't want a monolithic angular test) without the error message all help is appreciated. thanks.
I had the same issue, the issue for me was because I was requiring angular and angular-mocks exactly as you were inside each describe block. I moved the two lines
require('angular');
require('angular-mocks');
above the describe blocks and made sure to only call them once.

How do I parameterize the baseUrl property of the protractor config file

I need to run my protractor tests in different contexts with different baseUrls in the config files. I don't want to use separate config files for each situation since that is more difficult to maintain. Rather, I want to pass the base url in as a command line parameter. Here is what I have tried so far:
The protractor.conf.js:
exports.config = {
onPrepare : {
...
exports.config.baseUrl = browser.params.baseUrl;
...
}
}
And to invoke protractor:
protractor protractor.conf.js --params.baseUrl 'http://some.server.com'
This does not work since it seems like the browser instance is already configured before onPrepare is called.
Similarly, I have tried this:
exports.config = {
baseUrl : browser.params.baseUrl
}
But this doesn't work either since it seems like the browser instance is not available when the config is being generated.
It looks like I can use standard node process.argv to access all command line arguments, but that seems to be going against the spirit of protractor.
What is the best way for me to do what I need to do?
Seems like this is already possible, but the documentation is spotty in this area. Looking at the code, however, protractor does support a number of seemingly undocumented command line arguments.
So, running something like this will work:
protractor --baseUrl='http://some.server.com' my.conf.js
The other option is to use gruntfile.js and have it call the protractor config file.
//gruntfile.js
module.exports = function (grunt) {
grunt.registerTask("default", "", function () {
});
//Configure main project settings
grunt.initConfig({
//Basic settings and infor about our plugins
pkg: grunt.file.readJSON('package.json'),
//Name of plugin
cssmin: {
},
protractor: {
options: {
configFile: "conf.js", // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
args: {
baseUrl: grunt.option('baseUrl') || 'http://localhost:6034/'
}
},
your_target: { // Grunt requires at least one target to run so you can simply put 'all: {}' here too.
options: {
configFile: "conf.js", // Target-specific config file
args: {
baseUrl: grunt.option('baseUrl') || 'http://localhost:63634/'
}
}
},
},
//uglify
uglify: {
}
});
//Load the plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-protractor-runner');
//Do the Task
grunt.registerTask('default', ['cssmin']);
};
the Protractor config file: conf.js
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome',
'chromeOptions': {
args: ['--no-sandbox']
}
},
chromeOnly: true,
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['specs/*/*_spec.js'],
suites : {
abcIdentity : 'specs/abcIdentity/*_spec.js' //picks up all the _spec.js files
},
params: {
UserName: 'abc#test.com',
Password: '123'
},
// Options to be passed to Jasmine.
jasmineNodeOpts: {
defaultTimeoutInterval: 30000,
includeStackTrace: true
},
onPrepare: function () {
browser.driver.manage().window().maximize();
if (process.env.TEAMCITY_VERSION) {
var jasmineReporters = require('jasmine-reporters');
jasmine.getEnv().addReporter(new jasmineReporters.TeamCityReporter());
}
}
};
//To run with default url http://localhost:6034
grunt protractor
//To run with any other url
grunt protractor --baseUrl:"http://dev.abc.com/"
I know, old one. but if anyone is still looking for a way to define a url based on capability (I had to do this because Ionic 5 will run in browser on port 8100, but in the app - unchangable - without port declaration on port 80, I use Appium)
add a baseUrl parameter inside your capability declaration.
{
browserName: 'chrome',
baseUrl: 'http://localhost:8100' //not required but as example
}
{
...
app: 'path to app.apk',
baseUrl: 'http://localhost'
...
}
and then configure your onPrepare method as follows.
async onPrepare() {
const config = await browser.getProcessedConfig();
if(config.capabilities.hasOwnProperty('baseUrl')) {
browser.baseUrl = config.capabilities.baseUrl;
}
}
OnPrepare runs for each capability you define in your multiCapabilities array. the getProcessedConfig returns the config as you defined it, with the addition of the current capability. Since that method returns a promise, I use async/await for readability.
This way, you can have multiple capabilities running, with each different a different host.
Base url should be declared baseUrl: "", in config.ts
I am using cucumber hooks and the below code is added in hooks file to pass the required url based upon the environments
if(browser.params.baseUrl==="QA"){
console.log("Hello QA")
await browser.get("https://www.google.com");
} else {
console.log("Hi Dev")
await browser.get("https://www.gmail.com");
}
run the tests using protractor command
protractor --params.baseUrl 'QA' typeScript/config/config.js --cucumberOpts.tags="#CucumberScenario"