I would like to know how to capture and read the URL after a click event on an <a> link.
On the onClick event our javascript does some string manipulation of the actual href of the clicked link and then a window.location.href = myNewReplacebleURL is done on the fly. The original href is not necessarily the location you get to after the onClick.
Here is how I started:
describe("Twitter", function() {
it("Should assert that via value is set correctly in JS", function() {
cy.server();
cy.visit(Cypress.config("appUrl") + "/probes/sha/sha-via.html");
cy.get("#v_test ul.share li a")
.click();
});
});
EDIT: What I would like is to catch the URL located at the "Page Load" step.
You should be able to use cy.on to perform your assertions inside the url:changed event callback:
cy.on("url:changed", (newUrl) => {
expect(newUrl).to.contain("?magic=true")
})
You can use thecy.location() command, example:
cy.get("#v_test ul.share li a")
.click();
cy.location('href').should('eq', 'newUrl');
Also, as an alias to the cy.location('href') command you could use cy.url().
Related
Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.
Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')
HTML of the problem
Tried the other ways to click on iframe button:
cy.get('iframe[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
})
also
cy.get('[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('[class="resp-iframe"]').click(150,150)
})
and
cy.iframe('#resp-iframe').find('[name="submitButton"]')
Error
Error 2
Updated FYI:
The first part of code - clicking the Google button in bottom-right:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
Then, waiting for secure payment preloader to finish up:
cy.wait(20000)
Then, trying to catch the Process button by suggestions:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
or
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
whole code part looks:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
cy.wait(20000)
cy.iframe('[name="AcsFrame"]').find('#submit').click()
But still, getting:
Maybe anyone had something like that?
Thanks.
How about you try this:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
You don't need to repeat the resp-iframe inside the .find().
The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.
Everything else looks ok
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
After clicking an element on my webpage, I get the expected behavior from Response.Redirect in the trace, the break point on the expected page gets hit and proceeds to process normally. However when I'd expect the new page to be loaded, the display in the browser is not changed. It looks and behaves like the click brought you back to the same page.
I've moved the redirect call out of a try-catch block, and have tried different combinations of true/false as the second parameter with HttpContext...CompleteRequest()
What might prevent a page from being loaded after a call from Response.Redirect and the Page_Load sub completes?
Edit:
The site uses css and javascript to create a hoverable dropdown menu containing self referencing links, see below. I have tried using Chrome's dev tools to see what the network was processing. As far as I can tell from reading the Network Tab the click was creating the correct call; status 200, type xhr. xhr was the only thing that I found odd, but it looks like this is simply a reference to ajax? This leaves me in the same position. I am telling the site to redirect to new url, and I see the network take a request for that url, but the url in the address bar doesn't change; not the displayed page.
$(document).on('click','.navigation', function () {
loadItems($(this).attr('id'), $(this).attr('itemName'));
return false;
}
);
var loadItems = function (id, itemName) {
var editInfor =
{
"method": "getChildItems",
"id": id
};
$.ajax
(
{
type: "POST",
url: $.url,
dataType: "json",
data: JSON.stringify(editInfor),
success: function (jsonReply) {
$("#chkEnabled").attr('checked', jsonReply.enabled)
if (jsonReply.method == 'getChildItems') {
$("#childrens").html('');
var html = '<table>'
if (jsonReply.successfull) {
$.each(jsonReply.children, function (i, item) {
html += '<tr><td><span class="children">' + item.text + '</span></td><td><a class="moveItemUp btn" href="#" id="moveItemUp' + item.id + '">Move Up <i class="icon-circle-arrow-up"></i></a> <a class="moveItemDown btn" href="#" id="moveItemDown' + item.id + '">Move Down <i class="icon-circle-arrow-down"></i></a></td><td>Remove</td></tr>'
});
}
html += '</table>'
$($.childrens).html(html);
}
}
}
);
Please try this:
$.mobile.changePage( "/Exmaple.aspx", {
transition: "pop"
});
there are some button share the same id or class that casperjs cant classify, i want to click on the second or N selector match, i can do it with:
document.querySelectorAll('[id="something"]').click();
but i have to do it with the following basic format:
casper.then(function (){
this.click(id="something");
});
or. is there anyway i can make the following statement work?
var clickthis= '[id="something"]';
document.querySelectorAll(clickthis).click();
the var clickthis is working in casper.click,
but cant work in document.querySelector
thanks!
Try this way:
casper.evaluate(function(sel) {
document.querySelectorAll(sel)[1].click();
}, '[id="something"]');
To click on a second element, you can use:
function click(sel,n){var event=document.createEvent('MouseEvents');
event.initMouseEvent('click',1,1,window,1,0,0,0,0,0,0,0,0,0,null);
document.querySelectorAll(sel)[n].dispatchEvent(event);}
var casper = require('casper').create();
casper.start('http://domu-test-2/',function(){
this.evaluate(function(click){
click('li.node-readmore a',1);// click on a second element of the array.
},click);
})
.wait(3000,function(){this.capture('test.png');})
.run();
I'm writing tests with Angular Scenario test runner. Within a traditional form, I can enter text into an input, but I need to press enter to execute the query and there is no button to click on. Surely there is some easy way to do this, but I do not know what it is.
input('query').enter('foo bar');
// ... now what?
I tried to simulate a keypress with JQuery, but as this answer indicates JQuery is not loaded in the e2e scenarios scope. So I followed his advice (as well as that of this answer) to simulate the keypress:
element('#search_input').query(function(el, done){
var press = document.createEvent('keypress');
press.which = 13;
press.trigger(evt);
done();
});
But to this Angular replies:
NotSupportedError: DOM Exception 9
Error: The implementation did not support the requested type of object or operation.
Update
I realized that a very easy workaround is to include a hidden submit input in my form:
<input id="search-submit" type="submit" style="display:none;">
Then in the scenario: element('#search-submit').click(); does what is needed.
For a purer solution which doesn't involve modifying the HTML for the sake of testing, #florian-f's answer (as well as this one) provides access to jQuery within the DSL via:
var $ = $window.$;
which can be used there or passed to the callback. However, even with this access when triggering a press of enter I was not able to submit my form in the following manner:
$(selector).trigger($.Event('keypress', { which: 13 }));
This must be another issue all together. But I did find jQuery's submit function to do the trick:
$(#the_form).submit();
You can access to the app (runner in an iframe) instance of jQuery :
angular.scenario.dsl('appElement', function() {
return function(selector, fn) {
return this.addFutureAction('element ' + selector, function($window, $document, done) {
fn.call(this, $window.angular.element(selector));
done();
});
};
});
Then you can call the trigger method of jQuery in your test :
appElement('yourSelector', function(elm) {
elm.trigger('enter');//or keypress
});
There is also another possibility to trigger a key event. While your first approach
element('#search_input').query(function(el, done){
var press = document.createEvent('keypress');
press.which = 13;
press.trigger(evt);
done();
});
will be blocked by angular, this one
element(<selector>).query(function($el, done) {
var event = new CustomEvent('keyup');
event.keyCode = 13;
$el.val(2);
$el.get(0).dispatchEvent(event);
done();
});
will pass and trigger a keyup event on the element specified by the selector (keyCode = 13 = Enter Key). See https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent for further information.
Inside a jQuery loop, I'm trying to attach a click event to a dynamically created anchor tag which is contained in an LI element. The LI itself is dynamically created inside a static UL element. For some reason nothing gets fired when the anchor is clicked. Here is a simplified version of the problematic code:
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
console.info("Anchor clicked!");
event.preventDefault();
return false;
}).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});
where visiblecities is the id of the UL element and cities is a collection on which the loop iterates.
Any idea why the click event is not working?
Use event delegation to set up a single event handler that will react to all <a> elements, even if they're added after the code executes:
$('#visibleCities').on('click', 'a', function(event) {
console.info('Anchor clicked!');
event.preventDefault();
return false;
});
Though, as gdoron mentioned in the comments, your <a> elements don't currently have any content so they won't actually be clickable.
use .on.
$('a').on('click',function(){
//code here
});
Try
$('li a').on('click',function()
{
//code here
});
$.each($.MyProject.cities, function (index, city)
{
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});
use live method instead of click
$.each($.MyProject.cities, function (index, city) {
$('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
});