I am using cypress to test my site what I want to achieve is the following :
under this link: https://www.glassboxdigital.shop/product-page/classic
when I click on 'Add to Cart'
there is a side panel that pops out from the right side :
I want to click on 'View Cart' button my first go was the naive one - getting the element locator and click on it, as I saw it failed, I investigated a little bit and found out it is 'iframe' I tried using 'iframe' by pointing it out as following:
cy.get("iframe[frameborder='0']:nth-child(2)").then(function($elem){
var ifele = $elem.contents().find("a[id*='view-cart-button']")
cy.wrap(ifele).click()
but when I ran it the result was :
Expected to find element: undefined, but never found it
cy.get("iframe[frameborder='0']:nth-child(2)").then(function($elem){
16 | var ifele = $elem.contents().find("a[id*='view-cart-button']")
> 17 | cy.wrap(ifele).click()
| ^
18 | })
19 |
20 | }
It cannot locate the element because the side panel is generated into the html when the side bar is called upon, but Cypress is searching for the element on the page before the side bar is called.
Edit the code to execute whatever scripting is forming the side bar and then use the element location you tried previously.
Since cypress doesn't provide a native way to deal with iframes hence we will create a custom command, basically to traverse through an iframe. Go to cypress/support/command.js and write:
Cypress.Commands.add('getIframe', (iframe) => {
return cy.get(iframe)
.its('0.contentDocument.body')
.should('be.visible')
.then(cy.wrap);
})
Your Test should look like:
it('Go inside iframe and click', function() {
//Visit webpage
cy.visit("https://www.glassboxdigital.shop/product-page/classic")
//Wait till the Let's Chat header is visible
cy.get('#comp-jor13ajz > .yuKeh').should('be.visible')
//Click on the Add to Cart button
cy.get('[data-hook="add-to-cart"]').click()
//Go inside iframe and click View cart button
cy.getIframe('iframe[name*="tpapopup"]').contains('View Cart').click({
force: true
})
})
After Execution:
Related
After selecting a product and opening it in another page Im not able to click on add to cart button in amazon using selenium.
If you are not switching to other page, Add to card option will not be located.
Switch to the opened page and then try to click on the button.
handles = driver.window_handles
driver.switch_to.window(handles[1])
driver.find_element_by_id("add-to-cart-button").click()
If you have done this, share the code you have tried and error you get.
Without HTML page you are trying to perform, it is difficult to pinpoint exactly. However, I would like to take a stab at it considering these:
Click on product in home page
Product opens in a new tab window
Click on add to cart
P.S: I will write it using Java since you haven't mentioned on the language being used. Will be similar in others as well
Click on product in home page
List <Webelement> productCheck = driver.findElements(By.xpath("<xpath of the product>"))
if (productCheck.size() == 0){
// do something
else {
driver.findElement(By.xpath("<xpath of the product>")).click();
}
Product opens in a new tab window and Click on add to cart
String parent = driver.getWindowHandle();
List<String> windows = new ArrayList<String>(driver.getWindowHandles());
driver.switchTo().window(windows.get(1));
// Inside the tab window
List <WebElement> addtoCartButton = driver.findElements(By.xpath("<xpath of Add to cart button>"));
if (addtoCartButton.size() == 0 ) {
// do something
else {
driver.findElement(By.xpath("<xpath of Add to cart button>")).click();
}
// do whatever you want in the new tab and if you want to switch back then:
driver.switchTo().window(parent);
I have a card inside another clickable card. In my case, a carousel inside a card.
In a usual situation, I know I have to use #click.stop to prevent opening the parent card from opening when I click something clickable inside it.... but in my case, I'm having a carousel which do not have a click event, hence, I'm unable to use stop event on it. So what happens is when I click the next arrow of the carousel, the parent card pops up too.
Any idea how do I use stop event handling on something that do not have click event?
________________
| <-|---- Master Card
| ------------ |
| | <--|-|---- Carousel
| |__________| |
| |
| |
|______________|
tl;dr:
In Vue, if you want to stop the native click events, you have to use the native event modifier:
<carousel #click.native.stop />
or
<carousel #click.native.stop="yourMethod" />
Internally, the .stop modifier calls .stopPropagation() on the native click event, besides running yourMethod with the click event as param (when yourMethod is specified).
$emit()-ted click events (i.e: $emit('click', payload) don't need stopping, as they are not propagating by default.
complete answer: (regardless of Vue)
Any HTML element has an onclick event.
Therefore,
document.querySelector('.your-selector').onclick = function(event) {
event.stopPropagation()
}
will stop the click event's propagation (assuming document.querySelector('.your-selector') does select your carousel - note querySelector only returns the first element matching the selector).
If you want to do this on multiple elements matching the same selector, you'll need to use querySelectorAll and iterate through each element. Example:
[...document.querySelectorAll('.your-selector')].forEach(el => {
el.onclick = function(e) {
e.stopPropagation();
}
});
There are less verbose ways of doing it using frameworks, such as jQuery:
$('.your-selector').on('click', e => { e.stopPropagation(); })
... which does it on the entire collection returned by $('.your-selector'), out of the box.
One Video is there below that one button is there i need to automate that button wheather that button is present below that video or not any one please help me to resolve this
If the button is a part of the page DOM and it can be searched by Selenium you should be able to access it's Location property like:
System.Drawing.Point location = driver.FindElement(By.XPath("//your_element_locator")).Location;
Console.WriteLine("My element location: " + location);
If you want to conditionally execute this or that code block depending on presence/absence of the element you can go for FindElements() function like
if (driver.FindElements(By.XPath("//your_element_locator")).Count > 0)
{
// element is present
}
else
{
//element is absent
}
If the button is not present in the DOM and it's a part of video - you will have to go for image recognition frameworks like AForge.NET, Emgu CV or SeeTest
I have a custom menubutton in my tinyMCE editor that uses specific HTML elements elsewhere on the page as the menu items. I use a jQuery selector to get the list of elements and then add one each as a menu item:
c.onRenderMenu.add(function(c,m) {
m.add({ title: 'Pick One:', 'class': 'mceMenuItemTitle' }).setDisabled(1);
$('span[data-menuitem]').each(function() {
var val = $(this).html();
m.add({
title: $(this).attr("data-menuitem"),
onclick: function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val) }
});
});
});
My problem is that this only happens once when the button is first clicked and the menu is first rendered. The HTML elements on the current page will change occasionally based on user clicks and some AJAX, so I need this selector code to run each time the menu is rendered to make sure the menu is fully up-to-date. Is that possible?
Failing that, is it possible to dynamically update the control from the end of my AJAX call elsewhere in the page? I'm not sure how to access the menu item and to update it. Something using tinyMCE.activeEditor.controlManager...?
Thanks!
I found a solution to this problem, though I'm not sure it's the best path.
It doesn't look like I can make tinyMCE re-render the menu, so instead I've added some code at the end of my AJAX call: after it has updated the DOM then it manually updates the tinymce drop menu.
The menu object is accessible using:
tinyMCE.activeEditor.controlManager.get('editor_mybutton_menu')
where mybutton is the name of my custom control. My quick-and-dirty solution is to call removeAll() on this menu object (to remove all the current menu items) and then to re-execute my selector code to find the matching elements in the (new) DOM and to add the menu items back based on the new state.
It seems to work just fine, though tweaks & ideas are always welcome!
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?