I'm automating a web page which contains several nested iframes. This makes it hard for me to find the proper locator for the elements. I use firebug, the f12 tools ... to get xpath etc. but I miss something here, the iframe id.
Does someone know a tool where I can point on an element on the web page, and get the xpath and the iframe id?
THX
Firebug displays the iframes containing the inspected element within its ancestor path:
By clicking on the buttons within the ancestor path you can jump to the related iframe.
To get the XPath for an iframe right-click on it within the HTML panel and choose Copy Minimal XPath or Copy XPath from the context menu.
Related
I am a little bit new to programming but python really made get into it. I am trying to create a programm that automatically checks for updates in a website. I've successfully implemented the neccessary code to call the page of enrollment but yet there is one element that cannot be located. Since I have to do it for multiple courses and iterate throught them there is no specific id, I've tried to find it by title but also this didn't work.
Is there a way you can locate the button with the title "enroll".
I've tried
driver.find_element_by_xpath("//a\[#title ='enroll']").click()
but this didn't work and I always get
NoSuchElement
error.
The XPATH for the button is simply: //*\[#id="id572"\]
Here is the part of the HTML code:
From the screenshot of HTML code you provided, the element is <button>, not <a>.
Try this xpath expression //button[#title='enroll']
This should do it if it's not in any iframes. Just grab the button whose title is enroll and click. Your css selector was an a tag and it might get id dynamically.
driver.find_element_by_css_selector("button[title ='enroll']").click()
Issue : - Unable to detect the iframe and switch to iframe as the iframe id and name dynamically changes at each time it loads but the src remain the same.
Unable to identify the xpath as well. Found iframe tag using driver.find_element_by_tagname("iframe") but cant view the tag <iframe> in the HTML of the page source. Therefore unable to find the xpath by right click and iframe tag.
Already tried to find the number of frame size using 'frame.size' but since its not callable, it provide answer in dict which is 'height:0,weight:0'
Require to switch to this iframe and work with the element inside the iframe which is to
1) enter text field into the iframe
2) select radio button in the iframe
Unable to select element after switch to iframe
Screenshot of the code
enter image description here
By default, each frame is assigned an integer number. So you can always do:
driver.switchTo().frame(0)
or
driver.switchTo().frame(1)
You can wait until frame to be loaded as given below.
wait = WebDriverWait(driver, 300)
wait.until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,'//iframe')))
I was able to answer this, by determining the number of iframe. I've used 'find_element's'_by_tagname('iframe') instead of find_element_bytagname('iframe') which was able to find more than 1 iframe if exist in the page source.
This provides me total 3 iframe tag. Then i proceed to loop into the iframe and find the attribute of the each iframe such as id,name and src.
Then i noticed one of the iframe src, refers to the web address that has the element which i was looking for. Then i proceed to switch to that particular frame using if statement.
Once switch to the iframe, i proceed to get the element.
This solved on how to switch between frame using python-selenium and detect element upon switch the frame.
The key here is to detect on which frame does the element exist within and able to switch to that frame. The frame could be either nested within one frame or list of frame in the main window.
Upon detect and switch the frame. Then would be able to locate the element.
This solves the challenges
I'm trying to create a CSS documentation library in Orchard. I want to save a description, CSS snippet and HTML snippet against each content type. The first view would show the description and CSS and HTML code written out. The second view would show a preview of what the CSS and HTML look like rendered.
cssdocumentation.com/content/item1
cssdocumentation.com/content/item1/live-preview
I've created the content type and the first view. But I'm not sure how to create the second view. I can see if I can create the alternative URL I can use the Url Alternates module to create an overriding .cshtml
To create an alternative URL I've looked at the autoroute module but this only allows you to adapt a single URL (unless I'm missing something?) and I've looked at Alias UI but this forces me to manually create an alternative URL everytime I create a content item.
Is this possible in Orchard without writting too much C#? (I'm a frontend developer so I only dabble in the behind the scenes stuff)
Thanks for any help
Best solution is to do this within your own module. But as a secondary option instead of having a second page, combine this content with your first page and hide it with CSS. When the user clicks a button to navigate to the next step render the CSS/HTML result on the same page. You can do this in many ways, here are a few ideas:
Render the CSS/HTML result out straight away on the same page but hide it. Show it when the user clicks a button
using jQuery to render the result on the client side. More dynamic if you allow editing of the HTML and CSS.
Redirecting the user to the same page with specific url parameters which you can pick up in your alternate to modify the output.
Despite extensive Google search I haven't been able to find what I was looking for, so I'm hoping experienced SO users will have an answer.
I am looking for a Firefox or Chrome plugin that can automatically display elements' id attribute value inside an overlay on top of the actual elements. For instance:
The idea is to be able to have a quick snapshot of what id attributes are used within a page and where, instead of having to go through the entire page manually with tools such as Firebug or Firefox/Chrome's DOM inspectors (which only allow you to see elements one by one, not have a full picture).
Does anybody know a Firefox / Chrome plugin that can do that?
The "Web Developer" extension for Firefox / Chrome includes this feature. The option can be toggled by clicking on "Information -> Display Anchors".
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
In Firefox
In Chrome
Result
Instead of installing an extra extension, you could also enter $$('[id]') in the console, which results in a list of all elements with an "id" attribute.
Once a browser gets the main html page, how does it know which are the embedded content should be request again from web server, and which are only external links? Is it based on type of tags, e.g ?
If so, could someone give me a reference of what these tags are?
Thanks.
The HTML5 spec defines the element category "Embedded content":
Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
It lists the following elements:
audio
canvas
embed
iframe
img
math
object
svg
video
Elements like link or script (both in Metadata category) can also refer to other ressources that user-agents (browsers, screen-readers, …) are free to link to or include or do whatever they want to do with it. For example, browsers like Firefox or Chromium will (by default) load and "apply" CSS that is linked within the link element, that has the rel value = stylesheet. Browsers like Lynx or w3m won't do that. They simply ignore that link.
For link, HTML5 states which link types "are links to resources that are to be used to augment the current document, generally automatically processed by the user agent":
Two categories of links can be created using the link element: Links to external resources and hyperlinks. The link types section defines whether a particular link type is an external resource or a hyperlink.
Maybe also consider the style attribute (for inline CSS), which could include a background-image url.
Yes, the tags help browser identify the resources to load. After downloading/retrieving the content the browser determines what to do with the content based on the content-type header in the response.