Cypress.io cannot find any element, body or class - iframe

I've started testing a .jsp page which includes iframes.
After visiting the page it cannot find a single element, img, class etc etc.
Even using the playground selector it doesn't seem to recognize any link or elements.
I'm unsure if I need to target the iframe first or not.
Below is a recording of the playground selector not finding anything.
https://recordit.co/aQC6Awpxwy
I've added a screenshot of some source code below to help if anyone has any suggestions I can try.
Looks to be #Documents embedded inside of iframes, I have no idea where to start.

Related

Why can't I find elements in DevExpress code

I am a newbie in DevExpress and in ASP.NET framework and I have to debug some lines of code. At the html inspect element, when I hover over an image (with pick element from page enabled) I can clearly see an img tag, but I can't find something (in .aspx files) that seems to be generating this img tag.
Can you give me some tips on to debug my code better?
I tried to track the element's ID in order to find it in the code, but nothing seems to be matching the ID im searching for.

Can't reach inner document in object tag in React

I'm trying to make a preview of a pdf document using only the object or iframe tag.
My goal is to remove the toolbar and the scrollbar and correctly move the file to have a good looking image of my first pdf page. For such needs I need to apply css to some part of my document like "#outerContainer #mainContainer div.toolbar".
The problem is that I can't reach those components and I don't understand why.
I have tried to apply directly new class to the component but nothing happened or to switch to iframe tag.
I also went through different topics like this one : Access <object> data with JavaScript and I saw that my contentDocument is undefined
Here is a link to a sandbox demonstrating my attempt to access the inner document:
https://codesandbox.io/s/keen-cloud-z9gtf?file=/src/PDFObject.tsx
Thanks for your future help !

How to locate CSS from Chrome browser

I'm having trouble locating where the CSS class is defined that is styling an element on my page. When I inspect the element in Chrome, normally it shows the file name from which the CSS is originating, which I can then click on and go see the CSS file where it's defined. But this particular rule doesn't show any location. And when I look through all the code of my app, I can't seem to find the class anywhere. Any suggestions?
In the screenshot below, you can see that I'm trying to locate the .hom-whoc CSS class.
And in case it's helpful, the place this website is being hosted (and all the code is located) is in ClickFunnels. Unfortunately, the code is not in a repo anywhere, which would have made it much easier to search. This was all done in the ClickFunnels GUI in sections called things like "custom CSS" and "custom element." It's scattered through the interface, making it difficult to find where it's defined. But it should still be in SOME file that the page is using to style itself, which I imagine would be reference in the Chrome inspector.

CSS stylesheet not loading on linked page

I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html

jwebunit to check css style

I'm trying to assert the current styling of a div. For example, is it set to visible or not. I wasn't able to find a way in jwebunit to get at this information though. Ideas? Alternate approaches?
Constraint: I cannot change the page I am trying to test.
There are two TestEngines which you can use with JWebUnit, HTMLUnit and Selenium. why not System.out.println("========="+ getPageSource()); and see if the page source return from both TestEngines gives css within the output. If they do that means you can verify css, if the output does not give css then i guess you will not be able to verify. One thing i know for sure is that it will show you the css file the page uses for style but as to the styling being applied I will say not, but try it

Resources