mobileEmulation capabilities for Firefox in webdriver IO - webdriver

I am trying to write end to end test cases for mobile web browsers. So I am setting the configuration for google chrome as below and it runs fine.
{
browserName: 'chrome',
'goog:chromeOptions': {
mobileEmulation: { deviceName: 'Apple iPhone 6' },
}
But I am not sure from where 'goog:chromeOptions' is taken. I tried searching wdio docs and couldn't find any.
I just got this from one of the blog that we need to pass key as "goog:chromeOptions"
Similarly I also need to run for Firefox and safari browsers. So I am not sure what key/hash we need to pass for firefox for mobile emulation.
I am trying to learn WDIO by practising simple exercises.

Set configuration for Google Chrome:
{
browserName: 'chrome',
'goog:chromeOptions': {}
}
Set configuration for the Firefox:
{
browserName: 'firefox',
'moz:firefoxOptions': {}
}
Set configuration for the Safari:
{
browserName: 'safari',
'safari.options': {}
}
Read more in the CONFIGURATIONFILE.MD

Related

What else is required to get this chart rendered?

With Symfony UX, in order to assure that a custom chart could be rendered, I started with the sample from documentation. The rendered page is effectively blank. In the browser's console is this string:
<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First dataset","backgroundColor":"rgb(255, 99, 132)","borderColor":"rgb(255, 99, 132)","data":[0,10,5,2,20,30,45]}]},"options":{"scales":{"y":{"suggestedMin":0,"suggestedMax":10}}}}"></canvas>
I interpreted that string to mean that the rendering process got as far as chart.js. But what later step(s) could prevent the chart from being fully rendered? Earlier step(s)?
assets\controllers.json:
{
"controllers": {
"#symfony/ux-chartjs": {
"chart": {
"enabled": true,
"fetch": "eager"
}
}
},
"entrypoints": []
}
package.json includes:
"devDependencies": {
...
"#symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/assets",
...
"chart.js": "^3.4.1",
...
}
../node_modules/chart.js/dist/chart.js: Chart.js v3.9.1
Thankfully(?), there are no discussions of Chart.js at the Mozilla forums. Applying the principle of pressing buttons until things change, I learned that the ad blocker I use was preventing the chart from being rendered. Why That, Firefox?

how to add Microsoft Edge browser on codecept.conf.js with protector

I'm trying to run a test on multiple browsers : Edge, Safari, chrome , firefox
I'm using this configuration on codecept.conf.js with protector:
Protractor: {
driver: 'hosted',
browser: 'miscrosoftEdge',
rootElement: 'body',
chromeOptions: {
args: ['--lang:FR']
},
But it returns this error :
Error: Could not write to D:\ysance_global_JS\node_modules\selenium-standalone.selenium\edgedriver\17134-MicrosoftEdgeDriver.exe

Web Font Loader - FontAwesome always reports inactive in IE

My site has some customers that work for organizations who are blocking font downloads in IE, so I need to create fallback options for FontAwesome. I am trying to use web font loader to detect if FontAwesome loaded correctly, but web font loader is always reporting that FontAwesome failed to load even though I can see that the FontAwesome icons loaded. I have tested IE 9/10/11.
You can view this in action at https://vnext.radresponder.net. You will see that in Firefox and Chrome, FontAwesome is correctly loaded and marked as active; however, in IE the font loads but then web font loader fires the failed to load callback and attaches the inactive class to the HTML tag. I have special CSS to load some fallback characters to replace the FontAwesome icons which are then loaded.
From the web font loader GitHub page, I don't see any incompatibilities listed with IE, so I assume this should work.
Here is my WebFont.load statement.
WebFont.load({
custom: {
families: ['FontAwesome'],
urls: ['/local/address/for/fontawesome.css'],
testStrings: {
'FontAwesome': '\uf00c\uf000'
}
},
loading: function () {
console.log("loading");
},
fontloading: function (fontFamily, fontDescription) {
console.log('fontloading: ' + fontFamily);
},
fontactive: function (fontFamily, fontDescription) {
console.log('fontActive: ' + fontFamily);
},
fontinactive: function (fontFamily, fontDescription) {
console.log('fontInActive: ' + fontFamily);
},
active: function () {
console.log("active: loaded all web fonts");
},
inactive: function () {
console.log("inactive: did not load all web fonts");
}
});
Edit - 2015/05/27 9:58 am
I changed the timeout from the default 3 seconds to 10 seconds, and the load is definitely taking all 10s and then timing out. I am not sure what that means. Why is it only timing out on IE?

I have an issue, following code is not working in Internet Explorer 6/7/10:

My jplayer is not working on ie7/8/10, first it gives me syntax error to Jplayer.swf i soved this problem,now IE shows the message like "To play the media you will need to either update your browser to a recent version or update your Flash plugin. " I am not getting what is happining, can anyone help me?
here is my code:-
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
[
{
title:"credit",
mp3: "<?php echo home_url('/audio/'.$_COOKIE['gita_language'].'/credit.mp3'); ?>"
} ]
, {
playlistOptions: {
loopOnPrevious: true,
autoPlay: true
},
loop: true,
/*swfPath: "js",*/
swfPath: "http://www.jplayer.org/2.0.0/js/Jplayer.swf",
supplied: "mp3, ogg, wav",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
solution: "html,flash"
});
To play the media you will need to either update your browser to a
recent version or update your Flash plugin.
Did you try updating the Flash plugin in your browser? And unless you have a specific need to support them you would do well to forget about making it work in IE6 or 7, and possibly even IE8.
try to update new flash player plugin that will make the magic to work

CSS content script issue in Google Chrome extension

I am creating a simple Chrome extension that blocks the "Google" logo image on the Google homepage using a content script. I followed the directions on the content-script page, but it still does not seem to be working. Can anyone spot what I'm doing wrong?
EDIT: I have tested it with other website like flickr.com and it works perfectly. I've also searched through the Google homepage CSS and cannot figure out which CSS rule is overriding my CSS. Any ideas? How can I make a stronger CSS injection so that no other CSS can override mine?
manifest.json:
{
"manifest_version": 2,
"name": "Google Logo Blocker",
"description": "This extension blocks the Google logo image.",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/"],
"css": ["blocker.css"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
blocker.css:
img {
display: none !important;
}
Your code works for me. You are using straight USA Google, not an international version, right?
Just in case, change your matches to:
"matches": ["http://*.google.com/", "https://*.google.com/"],
And target the logo more directly. This will work in most cases:
#hplogo {
display: none !important;
}
For full-on, international Google support, change the content_scripts portion of your manifest to:
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"include_globs": ["http://*.google.*/*", "https://*.google.*/*"],
"css": ["blocker.css"]
} ],
Optionally also using exclude_matches and/or exclude_globs as desired.
If it still doesn't work, state the usual:
Exact URL
Chrome version
OS
Other extensions active
It is <img> tag in modern version and is a <div> tag with background image for international version. Regardless, of the differences they bear same id = hplogo, so this can work for you.
Click for Larger Image
Use
#hplogo{
display:none !important;
}
it will remove google Logo.

Resources