Protractor W3C capability - protractor

I am using Protractor with Selenoid. I need to use the dockerized Windows images so that I can test Internet Explorer and Edge from Linux boxes.
I was able to make it work from curl by running:
curl -X POST http://127.0.0.1:4444/wd/hub/session -d '{"capabilities":{"browserName":"MicrosoftEdge","count":1,"alwaysMatch":{"browserName":"MicrosoftEdge","selenoid:options":{"enableVNC":true,"enableVideo":false,"enableLog":true,"logName":"edge-18.0.log"}}}}'
My protractor config looks like:
multiCapabilities: [
{
browserName: "MicrosoftEdge",
"alwaysMatch": {
browserName: "MicrosoftEdge",
"selenoid:options": {
enableVNC: true,
enableVideo: false,
enableLog: true,
logName: "edge-18.0.log"
}
}
}
]
But protractor send it over the selenoid server like this:
{
"desiredCapabilities": {
"browserName": "MicrosoftEdge",
"count": 1,
"alwaysMatch": {
"browserName": "MicrosoftEdge",
"selenoid:options": {
"enableVNC": true,
"enableVideo": false,
"enableLog": true,
"logName": "edge-18.0.log"
}
}
}
}
The issue is that desiredCapabilities should just be 'capabilities`. I have been looking everywhere trying to find out where is that created so that I can created some sort of flag to be able to switch it.
Any ideas?

Using Protractor 6.0 solve my issue, but broke all my tests.
I was able to keep using 5.4.1 by patching the selenium-webdriver package. Looking at the way Protractor 6 did it, I did it to Protractor 5.4.1:
I edited the file located at node_modules/selenium-webdriver/lib/webdriver.js and added the following:
// Capability names that are defined in the W3C spec.
const W3C_CAPABILITY_NAMES = new Set([
'acceptInsecureCerts',
'browserName',
'browserVersion',
'platformName',
'pageLoadStrategy',
'proxy',
'setWindowRect',
'timeouts',
'unhandledPromptBehavior',
]);
Then in the same file I modify the static createSession(executor, capabilities, opt_flow, opt_onQuit) method to add the following:
let W3CCaps = new Capabilities(capabilities);
for (let k of W3CCaps.keys()) {
// Any key containing a colon is a vendor-prefixed capability.
if (!(W3C_CAPABILITY_NAMES.has(k) || k.indexOf(':') >= 0)) {
W3CCaps.delete(k);
}
}
cmd.setParameter('capabilities', W3CCaps);
After all those changes the request getting to Selenoid is like this:
{
"desiredCapabilities": {
"browserName": "MicrosoftEdge",
"version": "18.0",
"enableVNC": true,
"enableVideo": false,
"count": 1
},
"capabilities": {
"browserName": "MicrosoftEdge"
}
}
And my Protractor 5 config looks like this:
multiCapabilities: [{
browserName: 'MicrosoftEdge',
version: '18.0',
enableVNC: true,
enableVideo: false
}]
Note:
So that I don't have to worry about refresh installs or updates I use the package patch-package (https://github.com/ds300/patch-package) to create a patch that is applied when any of those events happen. Here is a great video explaining how to use that package https://www.youtube.com/watch?v=zBPcVGr6XPk

Related

Babel giving Plugin/Preset did not return an object after adding #babel/helper-annotate-as-pure

I've recently added #babel/helper-annotate-as-pure to my list of babel plugins:
require('babel-plugin-macros'),
require('#babel/helper-annotate-as-pure').default,
require('babel-plugin-dev-expression'),
[
require('#babel/plugin-proposal-class-properties').default,
{
loose: true,
},
],
[require('#babel/plugin-proposal-decorators').default, { legacy: true }],
require('#babel/plugin-proposal-numeric-separator').default,
[
require('#babel/plugin-transform-runtime').default,
{
corejs: false,
helpers: true,
version: require('#babel/runtime/package.json').version,
regenerator: true,
useESModules: moduleFormat === 'esm',
} as RuntimeOptions,
],
require('#babel/plugin-syntax-dynamic-import').default,
require('#babel/plugin-proposal-optional-chaining').default,
require('#babel/plugin-proposal-nullish-coalescing-operator').default,
isDevelopment && require.resolve('react-refresh/babel'),
I previously used 'babel-plugin-annotate-pure-calls' but after adding the plugin I continually get the same error at different points:
Plugin/Preset did not return an object
If I comment out the plugin, everything works
#babel/helper-annotate-as-pure is a helper utility module that is part of Babel itself, it is not a plugin, so it cannot be used in the plugins array. All plugins in the #babel namespace start with plugin- in their name.
You'd have to see if babel-plugin-annotate-pure-calls, the original plugin you used, works properly.

Set Internet Explorer options for protractor (--headless)

I would like to set headless option in my protractor configuration for internet explorer, but I cannot find anyting related to this. They only say how to do it in Chrome and Firefox: Adding chrome and Firefox specific options.
This is what I have so far:
multiCapabilities: [
{
'browserName': 'chrome',
chromeOptiaons: {
args: ["--headless"]
},
},
{
'browserName': 'firefox',
'moz:firefoxOptions': {
args: ["--headless"]
}
},
{
'browserName': 'internet explorer',
internetExplorerOptions: { <---------------------------
args: ["--headless"] <---------------------------
}
}
],
internetExplorerOptions is not working
So how do I add the 'Options / args' option to IE?
IE does not have support for a headless mode. But you can try to use triflejs.
I did not try this solution by myself but seems like it's the only option since IE is basically obsolete browser and it does not receive any updates.
First of all, you need IEDriverServer.
I will try to make this as simple as possible. The proper way to get and install this is, by using protractor’s built-in functionality.
Install Webdriver-manager and gulp, globally.
npm installwebdriver-manager gulp -g
Browse to node_modules/protractor/bin and run
npm webdriver-manager --standalone update
npm webdriver-manager --ie update
Then, you will need to manually start the webdriver server
For this, you will need to run
npm webdriver-manager --ie start
As simple as that.
After that, the 2nd step is to get the config file right.
The spicy and “different” stuff is: Capabilities, direct connect, and
LocalSeleniumStandaloneOpts
Necessary and Important examples for config file, in order to run the spec test suite:
capabilities: {
'browserName': 'internet explorer',
'ignoreProtectedModeSettings': true,
'platform': 'ANY',
'version': '11',
args: ['--silent', '--no-sandbox', '--test-type=browser', '--lang=US', '--start-maximized'], //,'--headless', '--disable-gpu'
prefs: {
'download': {
'prompt_for_download': false,
'directory_upgrade': true,
'extensions_to_open': '',
'default_directory': process.cwd() + '/downloads/'
},
}
},
localSeleniumStandaloneOpts: {
jvmArgs: [
'-Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer3.14.0.exe'
]
},
directConnect: false,
framework: 'jasmine',
seleniumArgs: ['-
Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-
manager/selenium/IEDriverServer3.14.0.exe'],
seleniumAddress: 'http://localhost:4444/wd/hub'

Protractor to dynamically choose browser based on input

I am new to protractor and I want to be able to run my chrome browser painted or headless.
So I set up something like this
let chrome = {
browserName: 'chrome',
platform: 'MAC',
'max-duration': '1800',
};
let chromeHeadless = {
browserName: 'chrome',
chromeOptions: {
args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
}
};
browserDefault = browser.params.browserToUse
exports.config = {
params: {
'browserToUse': "get from user'
},
capabilities: browserDefault,
}
and i ran this code as
protractor config.js --params.browserToUse='chromeHeadless'
But this does not work. Protractor fails saying it does not understand "browser.params.browserInput". Whats the right way to make protractor dynamically choose chrome or chromeheadless based on the input
The global variable browser is only init when code run into onPrepare(). You used browser outside onPrepare() function, browser have not been inited, it is undefined, so you met the error.
Another point you need to get it's when the variable browser inited, a browser window has been opened, means protractor has know which capabilities to launch the browser. Therefore you can't use browser.params.xxx to specify which capabilities, you need to tell protractor the capabilities before it init the browser variable.
let capabilitiesMap = {
'chrome-headful' : {
browserName: 'chrome',
platform: 'MAC',
'max-duration': '1800',
},
'chrome-headless': {
browserName: 'chrome',
chromeOptions: {
args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
}
}
};
let browserToUse = 'chrome-headful'; // set default value
// extract the browserToUse value from cli
process.argv.slice(3).forEach(function(arg) {
var name = arg.split('=')[0];
var value = arg.split('=')[1];
var name = name.replace('--', '');
if (name === 'browserToUse') {
if (Object.prototype.hasOwnProperty.call(capabilitiesMap, value) ) {
browserToUse = value;
}
}
});
let config = {
seleniumAddress: '',
specs: [],
onPrepare: function() {}
};
config.capabilities = capabilitiesMap[browserToUse];
exports.config = config;
CLI example: protractor conf.js --browserToUse=chrome-headless
I also came across this issue and soleved it using the getMultiCapabilities() function in your conf.js
const _ = require('lodash');
let capabilities = {
chrome: {
browserName: 'chrome',
platform: 'MAC',
'max-duration': '1800',
},
chromeHeadless : {
browserName: 'chrome',
chromeOptions: {
args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
}
}
}
getMultiCapabilities() {
const browsers = this.params.browserToUse.split(',');//if you pass more than one browser e.g chrome,chromeHeadless
const cap = _(capabilities).pick(browsers).values().value(); //this uses the lodash npm module
return cap;
},
In a testing context working with just Chrome, I did the following. In capabilities:
chromeOptions: {
args: []
}
beforeLaunch: function() {
//at this point browser is not yet defined, so process command line directly
if (process.argv[process.argv.length-1].search('headless=true')>-1){
config.capabilities.chromeOptions.args.push("--headless");
config.capabilities.chromeOptions.args.push("--disable-gpu");
config.capabilities.chromeOptions.args.push("--window-size=1600,1000");
}
}
That way by the time the browser was launched, it had the right configuration. Where I have "headless=true", you might want "Chrome-headless."
And then on the command line I call it like you do with --params.headless=falseso that should I want to find it in the script itself later (after the browser has launched), it is readily available.
Note I had just one command line parameter and control of the command line, so it felt okay to assume this parameter was the last.

Automating webrtc Screenshare

I am trying to automate screen share workflow in a webRTC application.
I need to bypass the screenshare prompt. I am using --use-fake-ui-for-media-stream, use-fake-device-for-media-stream and --auto-select-desktop-capture-source flags in my config file.
Doesn't seem work.
Here is my config file :
exports.makeDefaultCapabilities = function(that) {
return {
browserName: 'chrome',
chromeOptions: {
// disable Password manager popup
prefs: {
credentials_enable_service: false,
download: {
prompt_for_download: false,
directory_upgrade: true,
default_directory: '~/Downloads'
}
},
args: [
'disable-infobars=true',
'--use-fake-device-for-media-stream',
'--use-fake-ui-for-media-stream',
'--auto-select-desktop-capture-source = "Entire screen"'
]
},
loggingPrefs: {
driver: 'WARNING',
server: 'WARNING',
browser: 'INFO'
},
I tried flipping between using fake-device and fake-ui flags and they do not get along if i understand correctly.
I do not understand what is missing here. Appreciate your inputs.
Thanks
https://bugs.chromium.org/p/chromium/issues/detail?id=459532#c22 explains why those flags don't play well together and how to workaround it by creating a custom profile that has already accepted getUserMedia permissions which makes the use-fake-ui-for-media-stream flag unnecessary.
See here for some code.

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"