How to get dynamic URL from ChildWindow using cypress - automation

I will click on button , it will then popup child window having dynamic URL each time.
Now i need to grab the dynamic URL and place it in cy.visit() and automate the things in child window
I tried in many ways, but couldn't solve the issue

These resources are great, gleb blog filip blog.
With no DOM details shown, you may be able to remove a target attr from the anchor and then click() to visit the link.
cy.get('a')
.invoke('removeAttr', 'target')
.click()

Related

Cannot Access Elements (iframe) using the cypress suggested selector

I have a difficulties with some content of the web-page when I am trying to discover the element
For example some part of the web-page is blocked by the following:
[data-testid=shell-content]
Any idea what could possibly cause following?
In the browser, the page isn't blocked and (all buttons) can be accessed by the keyboard or mouse.
Tried to upgrade to the lates version, still the same problem.
The problem was described against the iframe, it has to be handled in a similar way in order to access the elements
cy.enter('iframe[data-testid="iframe-content"]').then((getBody) => {
getBody().find('[data-test-id="create-user-button"]').click();
please note that name shell-content could be different to what was name in your project.

Page elements seen in the browser dev tools are not retrieved by ChromeHeadless

In this page :
https://www.bedbathandbeyond.com/store/product/o-o-by-olivia-oliver-turkish-modal-bath-towel-collection/5469128?categoryId=13434
I can see a button with "Add to Cart" text , I can also see it in dev tools.
But when the same page source is retrieved by ChromeHeadless using selenium, and my script searches for it, this text is not present.
I tried with selecting show page source in the browser, the source too did not have the "Add To Cart text"
Further I used a curl to GET page, "Add To Cart" wasn't in the returned page source either.
What am I doing wrong?
is the page hiding the button?
How can I check for its presence, for product availability check?
The elements you are looking for are inside the shadow DOM. You need to access the shadow root first. Hard to see exactly what is going on in the DOM without some trial and error, but something like this:
WebElement shadowHost = driver.findElement(By.cssSelector("#wmHostPdp"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement addToCart = shadowRoot.findElement(By.cssSelector(".shipItBtnCont button"));
More info on Shadow DOM & Selenium — https://titusfortner.com/2021/11/22/shadow-dom-selenium.html

Using colorbox in an iframe

I use colorbox plugin in my iframe. I would like to open it in parent window when i click a button. But the problem is that it opens in iframe's window. I couldn't find any solution yet. How can i solve this problem?
Assuming these are on the same domain, you can use the parent object in the iframe to open a colorbox in the parent window. (Something like parent.$('#id').colorbox() should work.)
If your iframe is on a different domain, I'm pretty sure you're out of luck due to cross-domain policy restrictions.

Difference between selenium.selectFrame() and selenium.selectWindow()

I've been struggling with the difference between the following commands, used while accessing widgets contained within iframes:
selenium.selectFrame("widget0");
selenium.selectWindow("name=widget0");
In the past (prior to IDE v1.0.12), I have been using these interchangeably, preferring the former over the latter in most cases. However, with 1.0.12, swapping them out after recording does not work. In what cases would each one be used?
Thanks.
selectFrame is the API of selenium to select a particular frame form HTML source.
Say, some HTML elements are present inside a iframe of HTML source, therefore u are
not able to take event on those elements until to use selectFrame API.
selectWindow will be used in those cases where after take some event a new browser popup
window open and u need to take action on the popup window instead of main browser page.
After doing ur operation u need to select back ur main browser window.

Where can I read how to make web notifiers such as the StackExchange at the top left side of StackOverflow screen?

I'm not even sure what the name of that is to be able to make a search... but I would like to make those kind of things. Facebook has that too with the messages, notifications and friends requests. Thanks
I'm not sure if you expect anyone to give you a complete tutorial with source code included? :) You should probably do some digging around yourself, since a concrete answer on this could mean to write a few pages :)
How can you dig around?
Thé tool for a job like that is Firebug (IMO).
With bigger tasks like these it makes sense to try to split it up in smaller pieces.
Let's say you go for a widget like the user profile popup on SO.
you need some HTML to display in a popup: right click on any html element on the popup and click the 'inspect element' menu item. This brings you to the HTML tab in firebug. This allows you to figure out how the HTML is structured
you need some CSS to style that popup: when you're browsing the html structure, you might already have noticed that on the right side of it is the CSS that is applied to the active element
you might want to use some animation effects: for that you could use jquery. Have a look here to find out more on which effects are available and how they can be triggered. Fading is used in the profile popup on SO.
then you might ask yourself the question where SO get's that html structure from, right? To find out more about which server calls are made you can use the 'NET' tab in Firebug. (When you hover over your user name (only the first time?), then you should notice there's a call made to something like: http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
In firebug you can then inspect the request and response. You should notice that the response is some HTML structure. This HTML structure is then inserted into the DOM.
Sooooo you can kinda glue it all together now:
the user hovers over his user name
the hovering triggers a server call (see step 4): use jquery hover to attach a handler to the user link. (subsequent hovers don't trigger that server call, so there needs to be a check to see if that profile popup was already loaded or not)
when the server call successfully returns (see jquery get), the returned html is inserted into the DOM and a fadeIn effect is triggered.
it seems a mouseout is used to fadeOut the popup
I HOPE this is the answer you were looking for. It took me a while ;)
You probably need to check out stackapps