I am trying to access a URL outside of the defined environment but the page load goes in a loop and does not load the home page once the authentication is completed from Login screen
My implementation is as below:
The below utility.js file launches URL based on the environment the user selects:
export class Utility {
getBaseUrl(){
let envs = Cypress.env('ENV');
console.log(envs)
if(envs == 'production'){
return "https://prodsite.site.com.au";
}else if(envs =='canarys'){
return "https://stagenv2.site.com.au";
}else if(envs =='stage'){
return "https://stageenv.site.com.au";
}
}
}
snippet of Cypress.json file configured as below:
{
"env": {
"nzUrl": "https://search.infotrack.nz"
},
"viewportWidht": 980,
"viewportHeight": 1200,
"baseUrl": "https://stageenv.site.com.au",
}
To call the utility.js, have passed the url in a constant
const url = new Utility().getBaseUrl();
Ideally, to launch the url, i use
cy.visit(url)
To access the environment variable,
cy.visit(Cypress.env('nzUrl'));
After launching the application. The login screen loads up , authenticates itself , but to show up the home page, the page goes in a loop and fails to load it self
The baseurl works as expected , no issues there.
Facing this issue when accessing the the url in env variable
Looking for some help here. I have tried the following:
The website launches perfectly manually
Configured cypress.json with a url for launching a webpage other than baseurl, this approach did not work
Troubleshooted the webelements
I am looking forward for any help / suggestions with this information. Appreciate your kind help in advance
Basically cypress uses baseURL configuration to navigate by the commands cy.visit() and cy.requests() as you can see in the documentation here
I really recommend you to create a config file for each environment like
production.json
canarys.json
stage.json
Using that you can open your page just using cy.visit('/') or a page like cy.visit('/main') and cypress will make all the hard job for you. You don't need an extra class to get baseURL.
It may help you: https://www.cypress.io/blog/2020/06/18/extending-the-cypress-config-file/
Related
i'm trying to build a social share component with angular 11 and ionic 5. I'm using an anchor tag to call href="whatsapp://send?#text=some%20text". This works fine on devices with WhatsApp installed, but i only get the following error in the browser console on devices without WhatsApp installed:
Failed to launch 'whatsapp://send?#text=text=some%20text' because the scheme does not have a registered handler.
How can i catch this error to show the user a nice message like "Sorry, you have no WhatsApp installed"
It seems it's not possible to handle it if using href property directly.
However, if you move this logic inside your components there are several options
Inside application:
You can check the app availability using this plugin i.e.
let app;
if (this.platform.is('ios')) {
app = 'twitter://';
} else if (this.platform.is('android')) {
app = 'com.twitter.android';
}
this.appAvailability.check(app)
.then(
(yes: boolean) => console.log(app + ' is available'),
(no: boolean) => console.log(app + ' is NOT available')
);
Inside browser:
Use timeout fallback i.e.
<!-- Deep link URL for existing users with app already installed on their device -->
window.location = 'yourapp://app.com/?screen=xxxxx';
<!-- Download URL (TUNE link) for new users to download the app -->
setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000);
Actually, this is the way we used in one of our web application and it worked successfully.
Use deep links handler library which allows you to work with deeplinks like this
<a href ="..." Fallback (and unsupported OSs)
data-app ="..." Deep link (cross-OS)
data-app-[os] ="..." Deep link (OS-specific)
data-store-[os]="..."> Store ID (OS-specific)
I didn't use it before so can't tell anything special regarding it
I use this to check if the app is installed or not.
"intent://scan/#Intent;scheme=whatsapp://send?#text=text=some%20text;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.whatsapp;end"
I have a web page where the functionality changes when a custom header "headerKey": "headervalue" is being set through a chrome extension. While I can do this manually I want to do it through the code in order to do test automation.
Note:-
Please help with the approaches.
There is no functionality in webdriver to perform this operation.
I have used modheader but it is not working.
getModHeaderExtension() {
const filename = path.join(__dirname, "Modify.crx");
console.log(filename);
const stream = fs.readFileSync(filename);
return new Buffer(stream).toString('base64');
}
I know some time passed since the question was added, although it took me some time to figure it out by myself so maybe someone will make use of it.
Add #wdio/devtools-service to your dev dependencies (this should have the same major version as your other #wdio libraries, otherwise you can get some problems)
You need to add devtools to services in wdio.conf.ts:
export const config = {
[...]
services: ['chromedriver', 'devtools']
[...]
}
Now add you can add headers in you test method or wherever you need to:
const encodedCredentials = base64.encode(`${appConfig.basicAuthDevUser.userName}:${appConfig.basicAuthDevUser.password}`);
browser.cdp('Network', 'setExtraHTTPHeaders', {
headers: {
Authorization: `Basic ${encodedCredentials}`,
},
});
More on using devtools with wdio:
https://webdriver.io/docs/devtools-service/
More on chrome specific capabilites:
https://chromedevtools.github.io/devtools-protocol/tot/Network/
I was able to find the solution to pass a custom header while opening my webpage.
I am using ChromeDevTools service which is supported by webdriverio v5, using its method
browser.cdp(domain, command, parameters);
For the domain, command, and parameters please visit devtools protocol below:-
https://chromedevtools.github.io/devtools-protocol/
What I really need is to load google apis client library for javascript when a user is logged in using google service. If a user is logged in using password or other external services, the library is not loaded.
Is this possible by any means?
Thanks.
If you want to load the library from an external URL after the user has logged in, you could try something like this (put this anywhere in your client code):
Tracker.autorun(function(c) {
var user = Meteor.user();
// replace this with the appropriate check for a google account
if (user && user.profile && user.profile.isGoogle) {
// stop the autorun now that the user is logged in
c.stop();
// load the api library
$.ajax({
url: '//url-to-fancy-google-api.google.com',
dataType: 'script',
cache: true
});
}
});
It is possible, use anti:modules package. First add it to the app:
meteor add anti:modules
Then create /layers folder inside your project and place your optional files in its subfolder:
/
layers
googleUser
someFile.module.js
anotherFile.module.js
...
Then in your code create a global module:
theApp = Module('$global').as('myApp');
and load it when necessary:
theApp.require('googleUser', function () {
console.log('googleUser code loaded');
});
I am facing the same problem as this one as I am trying to figure out how to use crossroads for a few hours now and nothing seems to work. its webiste is just another poor documented site... I think I am probably daft! I wonder if anyone has made it?
html head,
<title>Crossroads</title>
<script src="js/libs/signals.js"></script>
<script src="js/libs/crossroads.min.js"></script>
<script src="js/app.js"></script>
</head>
app.js, just as simple as this,
crossroads.addRoute('/news/{id}', function(id){
alert(id);
});
so I try it out on my localhost browser,
http://localhost/crossroadjs/#/news/123
nothing happens. I thought it would be 123??
Crossroads doesn't handle history/state change events from the browser. From their site:
A routes system shouldn't do anything else besides routing.
Instead, the site recommends Hasher for this purpose and gives a rather complete looking example:
//setup crossroads
crossroads.addRoute('foo');
crossroads.addRoute('lorem/ipsum');
crossroads.routed.add(console.log, console); //log all routes
//setup hasher
function parseHash(newHash, oldHash){
crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change
//update URL fragment generating new history record
hasher.setHash('lorem/ipsum');
Alternatively you could use a different history plugin, or write something yourself. But crossroads leaves that part up to you.
Crossroads.js gives crossroads.addRoute(pattern, [handler], [priority]); API to add route patterns. However, when the first time you load the page Crossroads does not automatically initiate the parser to check against the url of the page. You need to add crossroads.parse(document.location.pathname); on you document load to trigger the route. Check out Crossroads.js Tutorial.
Hi I create a spa with knockout, amplify and sammy.
If I now click an a link like:
#/page?s=About
it links to url.de/subdirectory/#/page?s=About which is right but the console fires following error:
GET url.de/About 404 (Not Found)
because it should be:
url.de/subdirectory/About
My sammy code is:
var app=$.sammy(function () {
// define prexecutes
// update parameters in appModel from request for all routes
this.before('', function() {
//setParameters(this);
});
// authenticate on any page except for login and logout routes
this.before({except: {path:/\/(login|logout|hp)/}}, function() {
});
// actual routes
// home
this.get('#/', function() {
appModel.page("home");
return false;
});
// content
this.get('#/page', function(eventContext) {
content(eventContext);
});
});
app.run('#/');
How do I get sammy not ignoring my subdirectory in which my site is?
You can try with another custom route definition like this
this.get('#/page/:s', function(eventContext) { // where s is parametre
content(eventContext);
});
also use url like this
#/page/About // it will read 'About' as value of parameter 's'
instead of
#/page?s=About
Hope this helps
I ran into a similar situation myself recently. I could not find any configuration options or workarounds that would allow Sammy.js to route to a subdirectory. My solution was to create a virtual host on the server hosting my app with the subdirectory as the subdomain in order to place the app at the document root. In your case, the virtual server would map from url.de/subdir/About to subdir.url.de/About. I realize that this may not be possible for you (since I don't know how much control you have over your hosting environment), but it got me moving again pretty quickly. Hope this helps.
P.S. As a small aside, I just browsed through the Sammy.js source at https://github.com/quirkey/sammy, and it appears that the subdirectory is stripped out (in error) to fix an IE quirk. https://github.com/quirkey/sammy/blob/master/lib/sammy.js#L301 may be the problem.