Is there any way to pass multiple browser via protractor cli - protractor

Just wanted to know is it possible to specify cli args to protractor like
--multiCapabilities.0.browserName chrome --multiCapabilities.1.browserName firefox
so that it overrides the multiCapabilities defined in protractor conf file.

A concrete example of Isaac Lyman's first suggestion:
CLI:
protractor ... --params.browsers="chrome,firefox"
conf.js:
var capabilities = {
chrome: {
browserName: 'chrome'
},
firefox: {
browserName: 'firefox'
}
};
...
getMultiCapabilities: function() {
var browsers = this.params.browsers.split(',');
// Using lodash to select the keys in `capabilities` corresponding
// to the browsers param.
return _( capabilities )
.pick(browsers)
.values()
.value();
},

There are a couple of things you could try.
How can I use command line arguments in Angularjs Protractor? explains how to pass in a "params" variable, which if you were totally pro you could reference later in the config file, with the multiCapabilities section (maybe use a helper function or an if statement so you don't have to pass in a complex object from the command line). Not easy to do, but possible.
https://sourcegraph.com/github.com/teerapap/grunt-protractor-runner (see the Options section) is a utility that lets you pass in these things from the command line without any trouble. It's open-source and seems like it would be easy to mod if it doesn't quite meet your needs.
The easiest option, assuming you just need a couple of different options, would just be to use two different config files, "protractor.chrome.conf.js" and "protractor.firefox.conf.js" and run whichever one you need at the moment.

This is a reasonable request. I've created a PR for this here: https://github.com/angular/protractor/pull/1770. For now, you can patch this PR to your local protractor to use this feature.

Related

Stop huge error output from testing-library

I love testing-library, have used it a lot in a React project, and I'm trying to use it in an Angular project now - but I've always struggled with the enormous error output, including the HTML text of the render. Not only is this not usually helpful (I couldn't find an element, here's the HTML where it isn't); but it gets truncated, often before the interesting line if you're running in debug mode.
I simply added it as a library alongside the standard Angular Karma+Jasmine setup.
I'm sure you could say the components I'm testing are too large if the HTML output causes my console window to spool for ages, but I have a lot of integration tests in Protractor, and they are SO SLOW :(.
I would say the best solution would be to use the configure method and pass a custom function for getElementError which does what you want.
You can read about configuration here: https://testing-library.com/docs/dom-testing-library/api-configuration
An example of this might look like:
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
You can then put this in any single test file or use Jest's setupFiles or setupFilesAfterEnv config options to have it run globally.
I am assuming you running jest with rtl in your project.
I personally wouldn't turn it off as it's there to help us, but everyone has a way so if you have your reasons, then fair enough.
1. If you want to disable errors for a specific test, you can mock the console.error.
it('disable error example', () => {
const errorObject = console.error; //store the state of the object
console.error = jest.fn(); // mock the object
// code
//assertion (expect)
console.error = errorObject; // assign it back so you can use it in the next test
});
2. If you want to silence it for all the test, you could use the jest --silent CLI option. Check the docs
The above might even disable the DOM printing that is done by rtl, I am not sure as I haven't tried this, but if you look at the docs I linked, it says
"Prevent tests from printing messages through the console."
Now you almost certainly have everything disabled except the DOM recommendations if the above doesn't work. On that case you might look into react-testing-library's source code and find out what is used for those print statements. Is it a console.log? is it a console.warn? When you got that, just mock it out like option 1 above.
UPDATE
After some digging, I found out that all testing-library DOM printing is built on prettyDOM();
While prettyDOM() can't be disabled you can limit the number of lines to 0, and that would just give you the error message and three dots ... below the message.
Here is an example printout, I messed around with:
TestingLibraryElementError: Unable to find an element with the text: Hello ther. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
...
All you need to do is to pass in an environment variable before executing your test suite, so for example with an npm script it would look like:
DEBUG_PRINT_LIMIT=0 npm run test
Here is the doc
UPDATE 2:
As per the OP's FR on github this can also be achieved without injecting in a global variable to limit the PrettyDOM line output (in case if it's used elsewhere). The getElementError config option need to be changed:
dom-testing-library/src/config.js
// called when getBy* queries fail. (message, container) => Error
getElementError(message, container) {
const error = new Error(
[message, prettyDOM(container)].filter(Boolean).join('\n\n'),
)
error.name = 'TestingLibraryElementError'
return error
},
The callstack can also be removed
You can change how the message is built by setting the DOM testing library message building function with config. In my Angular project I added this to test.js:
configure({
getElementError: (message: string, container) => {
const error = new Error(message);
error.name = 'TestingLibraryElementError';
error.stack = null;
return error;
},
});
This was answered here: https://github.com/testing-library/dom-testing-library/issues/773 by https://github.com/wyze.

SAP UIveri5 Minimum example

I am trying to understand how UIveri5 works and how to apply it to my own projects, but due to the minimal documentation I am unable to create a minimal working example.
I tried to apply the code from https://github.com/SAP/ui5-uiveri5/blob/master/README.md to "my" minimal app ( https://ui5.sap.com/1.62.0/#/sample/sap.m.sample.Button/code/ ), but the IDE VS Code marks errors, since i.e. the commands export or define are not known and I don't see where UIveri5 loads them from. Also if I just execute uiveri5 in my command line as is, I am getting an error ( I guess from selenium ) that my Chrome binary is missing, but don't the drivers get downloaded automatically?
conf.js
exports.config = {
profile: 'integration',
baseUrl: 'localhost:8080/.../sap.m.sample.Button',
};
page.spec.js
describe('Page', function () {
it('should display the page',function() {
element(by.control({
viewName: 'sap.m.sample.Button.Page',
controlType: 'sap.m.Page',
properties: {
title: "Page"
}}));
});
});
It would be awesome if someone already build a minimal example and can share it. It would help me very much in understanding how everything works together.
The minimum example is right in the readme.md. The only problem I see here is with the baseUrl - this should be a valid URL to an existing app. If this is a sample app on your localhost, you need a dev server.

Frontend headless browser testing using CasperJS and configuration-files?

I tried to use CasperJS for headless browser testing using PhantomJS and wanted to have a config file or something to change Website URL, Username passwords etc. So finally I found NuclearJS. Do you guys know any other perfect way to do this? If I wanted to write a one from the scratch would like to know about as well.
I got a solution (not perfect ;) ) that is using multiple configfiles (for selector, execution, desktop, mobile, etc).
I include a in the execution of my casperjs tests a file that offers me all configs i need (i include also global functions there).
Lets guess the test execution looks like that:
casperjs test --includes=loadGlobals.js test_1.js
In the that example loadGlobals.js contains functions like that:
var fs = require('fs');
var config = {},
configFile = fs.read('config.json');
config = JSON.parse(configFile);
Probalby the config.json is looking like that:
{
"url": "http://www.yourTestUrl.com",
"variable_1": "bla",
"variable_2": "blub",
"nextTier": {
"variable_1": "blablub"
}
}
Now you can call in the test_1.js the variables of the config.json:
casper.start(config.url, function() {
casper.then(function() {
casper.echo(config.variable_1);
casper.echo(config.variable_2);
casper.echo(config.nextTier.variable_1);
});
})
casper.run();
You can use like that different configurationfiles, even to override it during tests if nessacary.
The tests should be written in the page object pattern style so they are highly maintable, espacially with a outsourced configuration.
NuclearJS i didn't know, but i will take a look into it, too.

Babel plugins run order

TL;DR: Is there a way how to specify the order in which the Babel plugins are supposed to be run? How does Babel determine this order? Is there any spec how this works apart from diving into Babel sources?
I'm developing my own Babel plugin. I noticed, that when I run it, my plugin is run before other es2015 plugins. For example having code such as:
const a = () => 1
and visitor such as:
visitor: {
ArrowFunctionExpression(path) {
console.log('ArrowFunction')
},
FunctionExpression(path) {
console.log('Function')
},
}
my plugin observes ArrowFunction (and not Function). I played with the order in which the plugins are listed in Babel configuration, but that didn't change anything:
plugins: ['path_to_myplugin', 'transform-es2015-arrow-functions'],
plugins: ['transform-es2015-arrow-functions', 'path_to_myplugin'],
OTOH, this looks like the order DOES somehow matter:
https://phabricator.babeljs.io/T6719
---- EDIT ----
I found out that if I write my visitor as follows:
ArrowFunctionExpression: {
enter(path) {
console.log('ArrowFunction')
}
},
FunctionExpression: {
exit(path) {
console.log('Function')
}
},
both functions are called. So it looks like the order of execution is: myplugin_enter -> other_plugin -> myplugin_exit. In other words, myplugin seems to be before other_plugin in some internal pipeline. The main question however stays the same - the order of plugins in the pipeline should be determined & configurable somehow.
The order of plugins is based on the order of things in your .babelrc with plugins running before presets, and each group running later plugins/presets before earlier ones.
The key thing though is that the ordering is per AST Node. Each plugin does not do a full traversal, Babel does a single traversal running all plugins in parallel, with each node processed one at a time running each handler for each plugin.
Basically, what #loganfsmyth wrote is correct; there is (probably) no more magic in plugin ordering itself.
As for the my problem specifically, my confusion was caused by how arrow function transformation works. Even if the babel-plugin-transform-es2015-arrow-functions plugin mangles the code sooner than my plugin, it does not remove the original arrow-function ast node from the ast, so even the later plugin sees it.
Learning: when dealing with Babel, don't underestimate the amount of debug print statements needed to understand what's happening.

How can I add URL's dynamically to Protractor tests?

I am trying to use protractor in conjunction with Jenkins. In my jenkins, I need to have URLs dynamically generated.
So while running protractor tests, for example:
describe('angularjs homepage', function() {
it('should greet the named user', function() {
// Load the AngularJS homepage.
browser.get('http://www.angularjs.org');
element(by.model('yourName')).sendKeys('testUser');
});
});
In above example I want to pass a variable dynamically in place of "http://www.angularjs.org".
I could not find any variables that can be specified in the reference config as well.
You can use baseUrl as config parameter inside exports.config and then use browser.get('/path') inside your test spec. So in config you have e.g. baseUrl: 'http://localhost', so browser.get('/path') would call http://localhost/path.
If I understand the question correctly, you are looking for the environmental variable to configure the base url. In that case, since Protractor is built on WebDriver you should be able to set
webdriver.base.url="http://someurl"
Hopefully this is what you are looking for.
It looks like calling browser.baseUrl = "https://test-url.com" does the trick in onPrepare
you must have conf.js or conf.ts file. So, You can set "baseUrl" as part of your conf file under config
// conf.js
exports.config = {
framework: 'jasmine',
specs: ['spec.js'],
baseUrl: 'my-site.com'
}
then call this browser in your test like:
browser.get(browser.baseUrl);
I faced same issue and resolved like this.