How to show completed html source on chrome? - html

I'm trying to take the full html source of the tab in
this page
I want to take the source of
this tab
But unfortunately, the html I'm getting is not completed.
I registered a gif to explain it better
That select list is showing just when I inspect the element, while If I just insect the element with the list closed, it doesn't return any list html.. is it created dinamically when the user click on it?
I've tried to expand all the codes, but unfortunately it seems the html of every list is not appearing.. It might be created just when I open the list?
Is there a way to get the lists html?
Hope I've been clear.

Not sure what you want to save, but by inspecting it sources, it seems that the website use the way of removing and appending the html source which means only you pressed the expanded button, Javascript will append it (different options) to the body, otherwise it will not shown in the element tab.
I don't think you could get all html tags in just 1 try because the website use Javascript to append the html and you can't see it in the element section in console when the element is being removed.
Example:

You can save the page if you want. Just save it with Ctrl+S and you will find the basic source in there along with the stylesheet and other scripts.

Related

How to always add style in one site

I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability.
What I do at this moment is right click the page and open the inspector and add this line:
<style>li:hover {background-color: #ffff99;}</style>
It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)
The list look like this:
File.txt 85215165
File2.txt 96312121
File3.txt 41212123
File4.txt 65623443
File5.txt 69532055
... and so on
(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)
And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.
Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector
This may solve the issue:
Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.
Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.
document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)

How to click on a link in an iFrame in selenium IDE

Hello Stackoverflow community,
I am working with selenium IDE and I have the following problem:
I have to move a web content within a web content Management System from one folder to another. Therefore I have to click on a "Select" button to specify a target folder, then an iframe opens up where I can navigate through the "tree structure" of the folders.
The original page looks like this:
original page with "Select"-button
The structure of the web content management system is as follows:
Home
-Test(=Parent Folder):
-UniqueTitle
-UniqueTitle2
Because the folder that I want to adress(UniqueTitle2) lies one hierarchy below my current folder(I am in UniqueTitle), I have to click on the parent Folder "TEST" to go one hierarchy back. This is a link to the "TEST"-folder.
iframe where you can select the target folder
The problem is that on the original page below the iframe, the same Link to the "TEST"-folder exists as a breadcrumb. So if selenium clicks on the href link, it actually clicks the link on the original page, and not the one in the iframe.
I tried the following:
to select the iframe:
storeAttribute|css=iframe.dialog-iframe-node#id|iframeIDE
selectFrame|id=${iframeID}
to click on the link:
clickAndWait|link=TEST
clickAndWait|//a[contains(#href,'https://www.companyname.com/language/projectname/manage/maintenance/web-content-management[...]folderid=465576')]
Here is a HTML Snippet of the iframe:
TEST
How can I differentiate between these two, so my script will click within the iframe?
Thank you in advance and let me know if you need more information.
you have two options:
1. don't use iframe, use div or section instead
using this approach, you have to move the code for file selection to the main page. use AJAX to populate the file list to the div. this approach is often called single page application, though you don't need to move everything to a single page, just the file selection codes.
2. set allow-origin header of your iframe to your domain name or *
you should read about how to set this HTTP header.
here are some refs
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Probably duplicate of How to switch between frames in Selenium WebDriver using Java
First thing when you want to do something inside iframe is switch to it.
WebDriver.SwitchTo().Frame(WebDriver.FindElement(By.Id("iframe")));
After that you can click on element.
When you want to back you can use:
WebDriver.SwitchTo().DefaultContent();

How to view HTML source without refreshing the page in Chrome

I need to view all source HTML in plain text in one place. I need it from an already loaded page. CTRL+U (View Source) refreshes the page. The page I'm trying to view can only be accessed via proper form submit. What I really want is for CTRL+U to not refresh the page.
I need the HTML source of an already loaded page added to my clipboard.
I think none of the other answers really answer your question.
You want the exact response from the server, not the current DOM, and you want it with the exact request headers that was sent the first time.
To do so, open the Chrome Dev Tools and select the "Network" tab.
The very first request should be the page you requested. Click it and select the tab "Response" on the right side to get the exact response the server gave you.
Right click-> inspect element anywhere you want to see the html, it still show the code of all the page ans you can modify the value of html/css directly in it.
The only answer is the one Dor1000 provided himself in a comment:
dev tools, elements tab, right click html tag, copy, copy outer html.
He wants the current HTML (after javascript or any other modifications, not the original source HTML).

Web browser Automation Selecting a Link

Is it possible to click on a random <a> from a loaded HTML document in embedded webBrowser in my form? I'm using VB.net
I'm in a spot of bother. I've managed to get the Webbrowser to navigate to the page I want to be on, now i want it to invoke with page elements.
This is where it gets odd ok, sorry.
I have a rich text box of urls (these URLS are user inputted and match the links on the page I've already navigated to.)
I'd like to select a url at random from the richtextbox (up holds up to 10 lines) then find the href= on the page and invoke the <a>
Is this possible?
If I understand correctly, you have the webBrowser control with the current page loaded, and you want to select from the textbox a link to navigate to.
So you have the WebBrowser.Document.Body.InnerHtml property where you have the HTML of the loaded document, so i guess you can search that to match the input from your text box and with the url from the href call the Navigate method.
Hope that helps
WebBrowser.Document doesn't provide good Intellisense, but you have the full range of dom functions available to you at this point... (eg. getElementsByTag(string); )

Using microdata on elements created after during page load

I need to add microdata snippets to a list that is being populated by a script during the page load.
My code is written in a way that I have the basic list element in my html code, and it gets duplicated as the list is populated (this happens once when the page is loaded).
I try to add microdata to every element in the list, but when I use google's rich snippet tool it seems that it only reads the basic html snippet and not the whole list after it was populated. I do the exact same trick on a different page and there it seems to work fine (meaning i get a list of videoObjects each containing the data inserted to it) [edit: the second page was created on server side, this is why it worked on it].
Any idea how to get around problem?
As a general rule, search engines do not read content dynamically created by JavaScript. So anything your script dynamically creates will be invisible to Google. If you want them to index this content you need to create this content server side.