I'm trying to login to our site which uses Auth0 and Google Sign in but I'm having issues with cy.origin it's behaving different in each browser, none of which is letting me log in. This is my test:
import { loginPage } from '../../page-objects/login-page'
describe('Login Tests', () => {
beforeEach(() => {
loginPage.visit()
})
it('GoogleLogin', () => {
// Click google sign in button - On My Base URL
cy.get("a[data-testid='googleSignInButton']").click()
// I'm now on an Auth0 Page where I click the Google Sign In Button
cy.get("a[class='auth0-lock-social-button auth0-lock-social-big-button']").click()
// Now I am on the accounts.google.com domain
cy.origin('https://accounts.google.com', () => {
// enter email on accounts.google.com
cy.get("input[type='email']").type('myemail#gmail.com')
// click next button seen on accounts.google.com page
cy.get(
"button[class='VfPpkd-LgbsSe VfPpkd-LgbsSe-OWXEXe-k8QpJ VfPpkd-LgbsSe-OWXEXe-dgl2Hf nCP5yc AjY5Oe DuMIQc LQeN7 qIypjc TrZEUc lw1w4b']",
).click()
})
})
})
The issues I'm seeing are:
In Chrome once I get to accounts.google.com the test times out with "Timed out after waiting 60000ms for your remote page to load on origin(s)"
In Firefox the test times out with the same error as on Chrome but on the Auth0 page instead of accounts.goole.com
In Electron when I click the Google Sign in button on Auth0 I'm taken to accounts.google.com but a message is displayed "403. That’s an error. We're sorry, but you do not have access to this page. That’s all we know."
In Edge I can get to accounts.google.com and enter "myemail#gmail.com" and click the next button but then I see a message "This browser or app may not be secure.
Try using a different browser. If you’re already using a supported browser, you can try again to sign in." with a Try again button.
Four browsers are all reacting differently and not one is letting me actually login, can anyone see what I've done wrong?
Related
I am working on testing paypal checkout stuff using cypress. But the problem is that when the PayPal popup window opens, I don't know how to access these popup window elements. Can anyone help me to resolve this issue
Without a sample of the html, this will be a generic answer.
You will have to get the iframe of paypal, then drill down to its contents to be able to search within the paypal window elements.
cy.get('iframe')
.its('0.contentDocument.body')
// now you can search within the paypal window
In case you have any clicks you need to do, you may be redirected to another window, in which case you will have to use cy.origin().
cy.origin('paypal.com',
{ args: sentArgs },
({ url }) => {
const path = url.split('com/')
cy.visit(`/${path[1]}`)
)
I have a simple login test in cypress (5.6.0, Windows 10). The application I am testing is written in PHP/MySQL. When I run the test in Cypress I get a 404 page not found error following the login.
This does not happen manually or with webdriver, just with Cypress.
Here is the script (which you can try)
describe('Admin Login', () => {
Cypress.config('baseUrl','https://www.edgewordstraining.co.uk/webdriver2')
it.only('Successful Login', () => {
cy.visit ('/')
cy.get('div#right-column > h1').contains('Web Testing Index Page V2 Sprint2')
cy.contains('Login').click()
cy.get('body').contains('User is not Logged in').should('exist')
cy.get('#username').clear()
cy.get('#username').type('edgewords')
cy.get('#password').clear()
cy.get('#password').type('edgewords123')
cy.contains('Submit').click()
//error 404 occurs here
//cy.visit ('/sdocs/add_record.php') //Had to add this as Cypress changes the URL from the form submit for some reason!
cy.get('body').contains('User is Logged in').should('exist')
//Logout
cy.contains('Log Out').click()
//Handle the confirmation Alert
cy.on('window:confirm',(str)=>{
expect(str).to.equal('Do You Really want to Exit the Secure site! Press ok to Continue ')
})
cy.get('body').contains('User was Logged in').should('exist')
});
And when I run with Chrome or Firefox, I get this in the log:
enter image description here
and in the Test Runner, the URL has been truncated:
enter image description here
The URL should be https://www.edgewordstraining.co.uk/webdriver2/sdocs/add_record.php,
but cypress changes it to https://www.edgewordstraining.co.uk/sdocs/add_record.php
webdriver2 is just a physical folder on the web server where this app/site is stored.
I see that someone else had a similar issue, but there are no replies on his question. Could anyone help? Thanks
Since the above post, I have now looked at the login function in the application itself.
else {
// document.write(response);
//location.replace("../sdocs/add_record.php");
//Had to change the line below as in Cypress, it is not moving back to the previous directory
//so have made it an absolute url instead
//window.location.href = "../sdocs/add_record.php";
window.location.href = "https://www.edgewordstraining.co.uk/webdriver2/sdocs/add_record.php";
return false;
}
The relative url path above should just go back to the parent directory (webdriver2) which it does if you use the site manually.
However, I have had to fix this as a fully qualified url to make it work in cypress.
So I have a workaround, but why does cypress handle it differently?
In the reCAPTCHA v3 docs, it says
reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.
How do we run it in the background of pages?
Let's say I have a React app that handles multiple web pages, and for one of my web pages, it is a sign up form where I want to get a risk score when users sign up. When the docs say to run reCAPTCHA in the background on other pages, does that mean it's running on other pages as long as <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> is in the header? Or do we need to call grecaptcha.execute(...) on all the other pages, and not just the signup page?
As long as you have the script attached, it will run in the background of pages. You can see that it's running if the reCAPTCHA banner/icon is showing on the page (usually bottom right corner). grecaptcha.execute(...) should be run on a specific action, like when you click a button to sign up for example.
#jojochuu, your answer is exactly right. Thanks for that.
I found another reason to run grecaptcha.execute. Logging. Loading api.js (the second line in the code below) is sufficient to activate recaptcha. It displays the flyout recptcha button.
I chose to add the second script that does call grecaptcha and gets the token. Then I use the token to get the score and any error codes from google. I log that data along with the visitor's IP address and a timestamp so I can see how the score changes over time. I can then compare my logs with access logs and maybe spot some IPs I want to ban. Mostly, I just want to know how score changes. I'll disable the logging by removing the second script block.
This is the best tutorial I found. Combining it with the google docs was enough to learn how to do recaptcha right.
<input type="hidden" id="visitor_ip" value="<?=$visitor_ip; ?>">
<script src="https://www.google.com/recaptcha/api.js?render=public-site-key" async defer></script>
<script>
// This correctly gets the token, but doesn't verify the user response (action).
function execGrecaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('<?=$settings->recap_public; ?>', {action: '<?=$actionName; ?>'}).then(function(token) {
logRecaptchaResults(token);
});
});
}
// Run after page loaded
window.onload=execGrecaptcha;
// Send token/ip to server for logging via ajax
function logRecaptchaResults(token) {
var vip=document.getElementById('visitor_ip');
$.ajax({
url: "https://<?=HOST_NAME_DOT; ?>domain.com/ajax/logit.php",
type: "get", //send it through get method
data: {
"token": token,
"visitor_ip": vip.value
},
});
}
</script>
Vist to https://www.binance.com/en.
Click on view more markets link.
The website is loading properly but when I am clicking on "View more markets" link. it is giving
the below error:
Blocked a frame with origin "https://www.binance.com" from accessing a cross-origin frame.
Before the page load, you were bound to the origin policy:
https://binance.com
A cross origin error happens when your application navigates to a new superdomain which does not match the origin policy above.
This typically happens in one of three ways:
1. You clicked an that routed you outside of your application
2. You submitted a form and your server redirected you outside of your application
3. You used a javascript redirect to a page outside of your application
Cypress does not allow you to change superdomains within a single test.
You may need to restructure some of your test code to avoid this problem.
Alternatively you can also disable Chrome Web Security which will turn off this restriction by setting { chromeWebSecurity: false } in 'cypress.json'.https://on.cypress.io/cross-origin-violation"
The code is below:
describe('My firs Test',()=> {
it('load page',()=>{
cy.visit("https://www.binance.com/en")
cy.xpath("//a[text()='View more markets']").click();
cy.wait(50000);
})
})
Did you try in your cypress.json file turning off chromeWebSecurity?
{
"projectId": "online-realestate",
"viewportWidth": 1200,
"viewportHeight": 1000,
"video": false,
"chromeWebSecurity": false
}
I am trying to integrate https://oauth.io/ into my application. Below is the code for facebook integration that I am using:
OAuth.popup('facebook')
.done(function (result) {
alert('sucess');
})
.fail(function (error) {
alert('fail');
});
Note: I am calling the above part of code in a button click.
In JQuery ready function I am calling OAuth.initialize("my_public_key");
When I click on the button I am getting "The parameter app_id is required" error in the popup. (added image of it)
Can someone let me know If I am missing something.
You must Integrate APIs in OAuth, follow the below method.
Login to your account.
Then click on the Integrated APIs menu from the left side bar.
Now click on ADD APIs green button on the right top corner.
Now Search and select Facebook.
Now add the Keys and Permission Scope details and others.