Context :
#angular/cli 7.3.9
protractor 5.4.0
karma 4.0.0
Issue :
How do protractor's browser method get takes url parameters query ?
browser.get('${browser.baseUrl}?p=2') is redirecting to http://localhost:4200/&p=2 instead of http://localhost:4200&p=2.
When i supress last character of browser.baseUrl, the redirected url is http://localhost:420/&p=2 ...
Any idea ?
Edit :
I tried edit protractor.conf.js by adding baseUrl but i does not change anything ...
If you set a baseUrl in the config file, then there is no need to add browser.baseUrl in the get method, you can omit it.
For instance, in the config you have:
exports.config = {
// ...
baseUrl: 'https://github.com/search',
}
In the test, you can just add the query parameters like this:
it('should open the URL with the query parameter', async () => {
await browser.get('?q=test'); // will open the 'https://github.com/search?q=test' page
});
Related
I have saved a url in config.js file in runtime, now i have my url in "browser.params.tempVar". If i use it directly in script like browser2.get(browser.params.tempVar); it is not working, Could someone suggest how to use variable in browser.get() function.
What you're doing is the correct way.
Double check that you've got the param set up correctly in config.js:
exports.config = {
...
params: {
...
tempVar: "tempVar"
...
}
...
}
Then use the default protractor browser to retrieve the value:
...
const prot = require("protractor");
const browser = prot.browser;
const myParam = browser.params.tempVar;
browser2.get(myParam);
or in TS:
...
import {browser} from 'protractor';
const myParam = browser.params.tempVar;
browser2.get(myParam);
Could can also override this param value by command-line argument if needed:
Normal run:
npx protractor conf.js
Override param:
npx protractor conf.js --params.tempVar="newVar"
Since cucumber 3 removed the registerHandler and registerListener , how we can generate html report in cucumber 3.2.0.I have used below code for generating json report in cucumber 2.
defineSupportCode(function({ registerListener }) {
var JsonFormatter = new Cucumber.JsonFormatter();
JsonFormatter.log = function(string) {
var outputDir = 'testreports/report';
var fileName = 'cucumber-report.json';
var targetJson = path.resolve(outputDir, fileName);
if (fse.existsSync(outputDir)) {
fse.moveSync(outputDir, outputDir + '_' + moment().format('YYYYMMDD_HHmmss'), {
overwrite: true
});
}
fse.outputFileSync(targetJson, string);
};
registerListener(JsonFormatter);
});
and used below code for html report
defineSupportCode(function({ registerHandler }) {
registerHandler('AfterFeatures', function(features, callback) {
var options = {
theme: 'bootstrap',
jsonFile: 'testreports/report/cucumber-report.json',
output: 'testreports/report/cucumber-report.html',
reportSuiteAsScenarios: true,
};
reporter.generate(options);
callback();
});
});
Thanks in advance.
You have to do following changes:
1) set cucumberOpts.format in protractor conf file
cucumberOpts: {
format: ["json:reports/report/cucumber/cucumber-report.json"],
here reports/report/cucumber/cucumber-report.json is the cucumber json file path, you must specify a path at here.
framework will generate it automatically with results' json data as file content when all scenarios execute complete.
2) create parent folder of cucumber json file path before test framework load if parent folder not exist
Option 1: put create parent folder code at head of protractor conf file.
Option 2: create a Protractor plugin implement interface: setup(), which will be executed before test framework load.
// plugin: create-report-folder.js
var moment = require("moment");
var fse = require("fs-extra");
module.exports = {
setup: function() {
var reportDir = this.config.options.reportDir;
if (fse.existsSync(reportDir)) {
fse.moveSync(
reportDir,
reportDir + "_" + moment().format("YYYYMMDD_HHmmss"),
{ overwrite: true}
);
}
fse.mkdirsSync(reportDir);
}
};
Note: both options need to use Sync api to create folder.
3) create Protractor plugin implement interface: postResults which will be executeed after all scenarios execute complete.
// plugin: cucumber-html-reporter.js
var reporter = require("cucumber-html-reporter");
module.exports = {
postResults: function() {
var options = {
theme: "bootstrap",
jsonFile: this.config.options.jsonFile,
output: this.config.options.htmlFile,
reportSuiteAsScenarios: true
};
reporter.generate(options);
}
};
Note: I tried generate cucumber html report in cucumber AfterAll hook, but failed, seems Cucumber JsonFormater generate cucumber json file is Async, when AfterAll hook start execute, cucumber json file have not create yet.
I'm keeping look into formatOption, should be a way to change JsonFormater generate cucumber json file to Sync, then we can use AfterAll hook.
4) set plugins in protractor conf file
// protractor conf file
exports.config = {
plugins: [
// plugin to create report parent folder
{
path: "supports/create-report-folder.js",
options: {
reportDir: "reports/report/cucumber"
}
}
// plugin to generate cucumber html report
{
path: "supports/cucumber-html-reporter.js",
options: {
jsonFile: "reports/report/cucumber/cucumber-report.json",
htmlFile: "reports/report/cucumber/cucumber-report.html"
}
}
]
A workable scaffold for Protractor + Cucumber4 + HTML Report at my github
The scaffold for Protractor + Cucumber3 + HTML Report on my local has some dependency campatible issue, I'm looking into that in case you must use Cucumber 3.
5) If you use multiCapabilities, you can use below package to generate report:
protractor-multiple-cucumber-html-reporter-plugin
If the location of protractor.conf.js is not at the same level as node_modules then the cucumberOpts.format path would be relative to its current file location and the protractor-multiple-cucumber-html-reporter-plugin looks for the json files relative to parent root folder and warns about json file is not found.
To solve this provide absolute path of the json file to cucumberOpts.format like below. This is applicable if you're using cucumber for e2e testing in Angular applications where the protractor.conf.js is normally present inside e2e folder.
cucumberOpts: {
require: [path.resolve(process.cwd(), 'e2e/steps/*.ts')],
format: 'json:'+ path.resolve(process.cwd() + '/reports/cucumber-ui-reports.json')
}
when using jquery inside the component callback, the callback function for click
understands $ directly, and is working with $, but there is a jshint error
components/xxx.js: line 13, col 17, '$' is not defined.
Using this.$ inside the jquery click callback gives an error at run time
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this._super(...arguments);
this.$()
.on('click', function() {
$('.class').something(); //ok but jshint error
this.$('.class').something();//jshint ok but error at run time
});
}
});
Thanks
use this at the top of the file
/* globals $ */
Another approach is to set the following configuration to .jshintrc in the root of your app that prevents checking for the whole app which tells jshint that there are two global variables:
{
"globals": {
"$": false,
"jQuery": false
}
}
Note: If you like you can also use the jQuery version as same as Ember jQuery by changing
$('.class').something(); //ok but jshint error
to
Ember.$('.class').something();
which probably drops that error as well.
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"
I am trying to test a simple Backbone Model loaded via RequireJS:
define ["backbone"], (Backbone)->
class Todo extends Backbone.Model
defaults:
title: ''
priority: 0
done: false
validate: (attrs) ->
errs = {}
hasErrors = false
if (attrs.title is "")
hasErrors = true
errs.title = "Please specify a todo"
if hasErrors
return errs
toggleDone: ->
#save("done", !#get("done"))
return Todo
My tests look like:
requirejs.config
baseUrl: "js/"
paths:
jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min"
jqueryui: "https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min"
json2: "http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2"
underscore: "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min"
backbone: "http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min"
backboneLocalStorage: "https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min"
shim:
"underscore":
exports: "_"
"backbone":
deps: ["jquery", "underscore", "json2"]
exports: "Backbone"
"jqueryui":
deps: ["jquery"]
"backboneLocalStorage":
deps: ["backbone"]
exports: "Backbone.LocalStorage"
require ["models/todo"], (Todo) ->
console.log Todo
TodoTests = TestCase("TodoTests")
TodoTests::testCreateTodo = ->
todo = new Todo({ title: "Hello" })
assertEquals "Hello", todo.get("title")
assertEquals 0, todo.get("priority")
assertEquals false, todo.get("done")
The JS Test Driver config:
server: http://localhost:3001
load:
- ../public/js/libs/require.js
- ../public/js/tests.js
serve:
- ../public/js/models/*
- ../public/js/collections/*
- ../public/js/views/*
Problem seen from the JS Test Driver listened page on Chrome console:
Uncaught SyntaxError: Unexpected token <
Looking at Todo.js from Chrome,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Console Runner</title><script type="text/javascript">var start = new Date().getTime();</script>
Uncaught SyntaxError: Unexpected token <
<script src="/static/lib/json2.js" type="text/javascript"></script><script src="/static/lib/json_sans_eval.js" type="text/javascript"></script><script src="/static/jstestdrivernamespace.js" type="text/javascript"></script><script src="/static/lib/jquery-min.js" type="text/javascript"></script><script src="/static/runner.js" type="text/javascript"></script><script type="text/javascript">jstestdriver.runConfig = {'debug':false};</script>
<script type="text/javascript">jstestdriver.console = new jstestdriver.Console();
Notice its a HTML page instead of my actual JS. Also console.log(Todo) returns undefined since a HTML page is returned in place of a JS. Did I configure this wrongly?
I struggled with this for days and searched with Google endlessly until I finally found out what JsTestDriver was doing. In your requirejs.config, for your tests to run properly, your baseUrl needs to be:
baseUrl: /test/path/to/your/stuff
The reason is when JsTestDriver makes its server, it prepends /test/ to all the directories. If the baseUrl isn't set properly, it starts trying to send back local a reference to window I think.
The only other problem that I see you may run into is running the tests with the require statement as the first line. I have Jasmine and putting my require() at the top of my tests caused them to never run so I had to do it in my beforeEach for my tests and get the object before they ran.
I'm probably doing something wrong though I see countless other people claiming that the require statement in Jasmine works, so my hunt continues.
Have you checked your ajax responses? I just had the same thing and that '<' was from the opening doctype tag that was returned when the resource 404'd...