I'm new to cypress and working my way through various examples to support testing of my app.
I've got a select box which uses select2 - I can successfully select the item from the dropdown box but cypress is not then triggering the select event from which my code is running off.
How can I get Cypress to select the item and then trigger the select event?
Here's my test code:
cy.get('select[name=people] > option')
.eq(3)
.then(element => cy.get('select[name=people]').select(element.val(), {force:true}));
This succesfully selects the 3rd item in the drop down
I then have this code which takes actions based on the selection:
$('#people').on("select2:select", function (e) {
var selectId = $(this).select2('data')[0].id;
var castName = $(this).select2('data')[0].text;
$('option:selected', this).prop('disabled', 'disabled');
addCastTableRow(selectId, castName);
initRemoveCastButton();
$(this).select2();
});
Any thoughts appreciated
Thank you
Something that worked for me:
cy.get('#select2-dummy-valuer').click()
cy.get('.select2-results').contains('foo').click()
Related
Dom structure of application
const verifyComboboxData = async (
elementDescription: string,
expectedText: string
): Promise<void> => {
const elementVal = getLocator(elementDescription);
console.log("before:="+ elementVal);
let elementLocator1: string=elementVal + "//input[#value="+'"'+expectedText+'"'+"]" +"/preceding-sibling::div";
console.log("datanew:="+ elementLocator1);
console.log("datanewAfter:="+ elementLocator1);
const elementValPath = await $(elementLocator1);
wait(3);
//await elementValPath.selectByVisibleText(expectedText.trim());
console.log("dispaly:="+elementValPath.isElementDisplayed);
//elementValPath.scrollIntoView();
elementValPath.click;
};
ISSUE
Even xpath is correct but during code execution display is showing not displayed error.tried multiple webelement fuction like selectIndex,selectbyvisibletext and selectbyattribute but nothing working
I am trying to automate salesforce combobox its get recognize by xpath but during execution its showing display error
ISSUE
Even xpath is correct but during code execution display is showing not displayed error.tried multiple webelement fuction like selectIndex,selectbyvisibletext and selectbyattribute but nothing working
Tried automating dropdown using the below methods but the dropdown values couldn't be selected.
Method 1:
const comboOption = Selector("mat-option").child("span").withExactText("Hello");
await t.click(comboOption);
Method 2:
ClientFunction(() => {
document.getElementsByClassName('mat-option-text')[0].innerText = 'Hello';
document.getElementsByClassName('mat-option-text')[0].click();
return "Hello";});
The mat-option tag is not within mat-select. It is outside mat-select and within div tag.
Are there other ways to achieve automating mat-option ?
Thank you for the code snippets.
As far as I understand, you are trying to click an option element in another select element.
I created a simple test that should perform the steps you described:
import { Selector } from 'testcafe';
fixture`Getting Started`
.page`http://devexpress.github.io/testcafe/example`;
const selectElement = Selector('#preferred-interface');
const optionElement = selectElement.find('option');
test('My first test', async t => {
await t
.click(selectElement)
.click(optionElement.withText('Both'))
.expect(selectElement.value).eql('Both');
});
If I misunderstood your question, could you please share a simple example of your .html and a detailed description of
what you want to do in the test and which results you expect?
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();
});
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
Hi I'm using JQuery tabs http://jqueryui.com/demos/tabs/ with search results being returned from my server with each row potentially having its own tabs depending on the search results. If the user clicks on the sorting options then the search results change including the tabs within each row returned which may or may not have tabs. In the example above you can see there are 2 records returned and the top record has tabs called Other Videos.
I have been successfully able to retrieve the resultset back from the server and the template is bulding correctly, however i cannot get the .tabs() function to fire? Does anyone have any experience with using tabs and know how I can get my tabs() function to fire?
Here is the code I use to dynamically load the template after the json result set is returned:
$(".searchBox").fadeOut("fast", function () {
$(this).html("").fadeIn("fast", function () {
$("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");
});
});
And here is a for loop that I use to iterate over the results after the template has been loaded with the new html tabs created to try and get the .tabs() function to fire:
for(var i=0;i<json.Data.SearchResults.Results.length;i++){
if (json.Data.SearchResults.Results[i].OtherVideos.length || json.Data.SearchResults.Results[i].VideoFriends.FriendCount > 0)
{
$(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();
if ($(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").length > 0)
alert("it exists");
else
alert("it dont");
}
}
Suffice to say the alert box "it exists" appears successfully so it is finding the dynamically created html tab that the template generated however the tab itself is not being initialized by the statement:
$(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();
Does anybody know the reason why or what I'm missing here to get my .tabs() function to fire ...
I've examined the dynamic content and double checked the html code using firebug inspector and everything is according to how it should be the id's are correct, the #id's are there and so on, so my only conclusion is that the .tabs() function is not firing. Is this a limitation on the JQuery tabs itself? Can it not perform this type of "live" loading capability? Is there a callback function I should be using as part of loading the template itself?
Here is a picture of what is being returned after the call to the server without the tabs working:
Okay I fixed the problem, and thought I'd better give my answer for those of you who suffer a similar problem.
I should have placed my for loop inside of the same callback function as the tmpl call e.g:
$(".searchBox").fadeOut("fast", function () {
$(this).html("").fadeIn("fast", function () {
$("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast");
// For loop should go here!
});
});
I had the for loop after this block of code and the tabs() function essentially was not referencing the newly created tabs at all.