casperjs click on the second match selector - phantomjs

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();

Related

How to show a report with dynamic parameters from a chart on Pentaho?

I have a pie chart on my dashboard, using click action, I menaged to show a report that has one fixed parameter. Here is my JS function on click action:
function showreport(scene) {
var newWindow;
if(scene.getCategory()=='POS'){
newWindow=window.open("url_report?type_lm=POS", 'REPORT');
}else{
newWindow=window.open("url_report?type_lm=NEG", 'REPORT');
}
}
This one works fine.
But now I want to pass a dynamic parameter too ( the variable obtained with query component, it is stocked in result var (code_lm):
Here is what I did:
function showreport(scene) {
var newWindow;
var code_lm=this.dashboard.getParameterValue('code_lm');
if(scene.getCategory()=='POS'){
newWindow=window.open("url_report?type_lm=POS&code="+code_lm, 'REPORT');
}else{
newWindow=window.open("url_report?type_lm=NEG&code="+code_lm, 'REPORT');
}
}
This one doesn't work, nothing is displayed by clicking the chart. I found this line var code_lm=this.dashboard.getParameterValue('code_lm'); causes the prob.
However, I do the same thing with button component :
function showreport() {
var code_lm=this.dashboard.getParameterValue('code_lm');
var newWindow = window.open("url_report?code=" + code_lm,'REPORT');
}
and it works perfectly so I wonder why this.dashboard.getParameterValue() is not working in some cases.
Can anyone tell me where comes from the problem ?
yes, if you want to pass value of parameter from query component then you need set parameter value by writing bellow code in post fetch of query component.
function fun(code_lm) {
dashboard.setParam('yourParamName',code_lm.resultset);
}
check out this may help you. How to pass a variable obtained from query component into a query on Pentaho CDE? may help you.

Catch URL after click with Cypress (window.location changes)

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().

Create custom command to expand client detail template in Kendo UI Grid (MVC)

I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});

dojo/form/select onchange event not working for me in dojo 1.8

I am trying out dojotoolkit 1.8 and cant figure out how to hook up an onchange event for a dojo/form/select
Nothing happens with this
require(["dojo/dom","dojo/on"], function(dom,on){
on(dom.byId("myselect"),"change",function (evt){
alert("myselect_event");
});
If instead, the following hook into click works:
on(dom.byId("myselect"),"click",function (evt){
but i want to capture the value after user clicks and changes
I am sure it is simpler than going back to Plain ol javascript onChange...
Thx
You could try something like this:
var select = dijit.byId('myselect');
select.on('change', function(evt) {
alert('myselect_event');
});
I've seen this in the reference-guide multiple times, eg in the dijit/form/select' s reference-guide at 'A Select Fed By A Store'.
Maybe it even returnes the handle, i haven't looked this up so far. But i guess it should work.
EDIT:
Considering #phusick's comment, i want to add, that you could also simply change the "change" to "onChange" or the dom to dijit within calling on(...)
Following in the footsteps of #nozzleman's answer try
var select = registry.byId('myselect');
select.on('change', function(evt) {
alert('myselect_event');
});
If you use on instead of connect then you don't have to write onChange, you can simply write change.
Similar to above answers do a dijit.ById to find the correct element and then register the 'onItemClick' event.
creating the select dropdown programatically appends a _menu to whatever node you create the select items so 'search' becomes 'search_menu' on a page init you can do the following:
dojo.connect(dijit.byId('search_menu'),'onItemClick',function(){
//console.log("search menu");
doSearch('recreation');
});
As others have pointed out, you're trying to access the Dijit using DOM. Also, the parameter to the anonymous function for the "change" event is the value selected by the user, not the event itself.
Here's your code modified to access the Dijit and process the "change" event:
require(["dijit/registry", "dojo/on"], function(registry, on) {
on(registry.byId("myselect"), "change", function (value) {
alert("change_event.value = " + value);
});
});
Late to the party, but I recently ran into the issue. Hopefully my answer will help some poor soul maintaining some legacy code. The answer is for combobox but worked for select as well -
onChange not sufficient to trigger query from Dojo Combobox. Need to attach listener to dropdown items.
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});
Ref: https://stackoverflow.com/a/12422155/4564016

hiding a element using dojo in zend

dojo.addOnLoad( function() {
attach on click to id="textDiv"
dojo.query('#Specific_consultant-Yes').onclick( function(evt) {
// document.getElementById("Consultants").style.visibility = "hidden";
dojo.style.setVisibility('Consultants', false);
//alert('hai');
});
});
I tried to write code like this in zend in views page . the alert command works but the hiding of element does not work!!!any problem in code?
try to use the following code:
dojo.style("Consultants", "visibility", false);
i suspect the id of the element to be hidden is "Consultants"?
if this is not working, please provide your html-code.