I'm having trouble with clicking on the button that is multiple times on the website and has the same class.
First I need to locate a specific name and click on a button that is on the same line/row.
I tried to implement the bellow but it can find the button.
cy.contains('user2#gmail.com')
.parents('tr')
.find('button')
.click()
For example, I need to locate the name "Agranov Anton" and click on the clock icon next to it. The name changes every time.
The clock icon is the 2nd button, so add .eq(1) to pick that one
cy.contains('user2#gmail.com')
.parents('tr')
.find('button')
.eq(1)
.click()
You can also specify the <tr> element at the first step
cy.contains('tr', 'user2#gmail.com')
.find('button')
.eq(1)
.click()
BUT maybe the clock icon uses an <a> element, if so then use
cy.contains('tr', 'user2#gmail.com')
.find('a')
.eq(1)
.click()
Assuming that the name Agranov Anton is a td element and also the button is the correct selector of the button that you are clicking, you can do something like:
cy.contains('td', 'Agranov Anton')
.parent('tr')
.within(() => {
cy.get('button').click()
})
Related
jsfiddle: http://jsbin.com/wamunoside/1/edit?html,output
jsfiddle
This is taken from the example given on the Bootstrap 4 docs site:
just adding a 2nd dropdown to this example below the 1st dropdown found here:
https://v4-alpha.getbootstrap.com/components/navbar/#navbarNavDropdown
So in the jsfiddle this is how you cause the issue:
1.) reduce the width of the output tab so that it shows the menu for mobile (991px or less)
2.) You will see two 'dropdown link', click on the top one which expands the submenu.
3.) click on the other 'dropdown link' below the currently expanded one.
Notice both dropdowns are now closed - should have opened the 2nd dropdown.
ended up issue being my code...
I added the following if event.type == "mouseleave" and that seems to have fixed the issue reasonably well, still not perfect (for desktop):
http://jsbin.com/yiyohatequ/edit?html,css,js,output
I'm basically struggling with the best way to get dropdown-menu to appear 'on hover' for desktop and dropdown to appear 'on click' for tablet/mobile. so that is why I wrote this code in the 1st place.
/* Prevent more than 1 dropdown showing up at once*/
$('.nav-link').hover(function (event) {
//breaks mobile if this fires on "mouseenter". so only fire on "mouseleave"
if (event.type == "mouseleave") {
var hovered = this.nextElementSibling;//.dropdown-menu
var navdropdowns = $('.dropdown-menu');
navdropdowns.each(function (a, b) {
if (hovered != b) {
$(b).removeClass('show');
}
});
}
})
I'm trying to make Greasemonkey script that clicks on a button at intervals and also clicks on it at the first load without wait.
I made this code which clicks every 120 seconds but the first time the page loads I have to wait 120 seconds for the code to click the GO button or I have to manually do it. :
window.setTimeout(function(){document.getElementById("masterPage_cphPageBody_btnGo").click()},120000)
and here is the source code related to it from the website
<input id="masterPage_cphPageBody_btnGo" name="masterPage$cphPageBody$btnGo" value="Go" onclick="SetSearchDate();showWaitpage();" class="btn2" type="submit">
How can I add a line to click on the GO the first time the page loads and 120 seconds there after?
the webpage before and after pressing the GO button has the same exact URL so adding the click on GO button without wait time will send hte page into a loop of
URL loaded GO clicked
URL Loaded GO clicked
URL Loaded GO clicked
...
checked the differences of the page before and after the first time GO button is clicked...
so I need the script to click Go button immidiately only if the following page does NOT show on the page
<span id="masterPage_cphPageBody_lblSelectAvailableTime" class="bodyBold">Select an available time</span>
but if "Select an available time" text show on page the script should wait 120 secon
I'm running: Greasemonkey, Windows 8 64, Firefox
Use a named function instead on an anonymous one (Often a good idea anyway).
Then use document.querySelector to check if that element is present. (That function has much more flexibility than getElementById.)
So your code becomes:
if (null === document.querySelector ("#masterPage_cphPageBody_lblSelectAvailableTime") ) {
clickGoButton (); //-- Initial, immediate click.
}
window.setTimeout (clickGoButton, 120000);
function clickGoButton () {
document.getElementById ("masterPage_cphPageBody_btnGo").click ();
}
Considering the post and pre Go button URL are the same to avoid the boot loop I found a textual difference between post and pre click and used it to avoid the loop
here is the code that worked for me at last
if (/Select an available time/i.test (document.body.innerHTML) )
{
window.setTimeout (clickGoButton, 120000);
}
else {
clickGoButton ();
}
function clickGoButton () {
document.getElementById ("masterPage_cphPageBody_btnGo").click ();
}
In many websites, when we scroll down a button would appear. It says 'Top'. when we click it, then it will take us to the top of the page.
My question is:
I want to have similar functionality in a table but horizontally.
Let me explain, I have a table in my application which has 100+ columns. So if I want to go to the last column, then I have to scroll horizontally till i reach last column. I am using Jqgrid. Is there any implementation in jqgrid which will take us to the last column just by clicking a button or something? Anyone tried?
Here is a possible solution: https://jsfiddle.net/99x50s2s/38/
Add a custom button to your jqgrid as shown in the fiddler, get the width of the 'ui-jqgrid-bdiv' class and scoll to right on the button click event,
.jqGrid('navButtonAdd', '#sg1' + "_toppager", {
caption: "See last column",
title: "Last Column",
onClickButton: function () {
$('.ui-jqgrid-bdiv').animate({
scrollLeft: $(this).width()
}, 'slow');
}
});
I'm having a inline editable div. I can type, delete, add. Works great. I wanted the text within he div to be selected on focus (or if you click it). So I added the following to the code
var editor = CKEDITOR.instances.div#{attr};
var element = editor.document.getById('div#{attr}');
editor.getSelection().selectElement( element );
This works too. Fully selected on focus. However, if I press the delete key or any other character key to overwrite the programmatically selected text, it doesn't change. It's as if more than only the text is selected, and the browser doesn't let me delete it. If I select the text manually, it works.
The selection#selectElement method will start selection before passed element and end after it. This means that not only editable's content will be selected but also non-editable parts of contents outside it and therefore selection may not be editable.
This is a correct solution:
var editor = CKEDITOR.instances.editable,
el = CKEDITOR.document.getById( 'editable' ),
range = editor.createRange();
editor.focus();
range.selectNodeContents( el );
range.select();
But the easiest solution is to use selectAll command defined in selectall plugin:
editor.execCommand( 'selectAll' );
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();