Unable to inspect element on HTML page (right click inspect element) - java

For example, go to Yahoo, and try to right click -> inspect element on the arrow button eluded to in the picture below.
Nothing will popup so I'm unable to inspect element, and when inspecting the DOM I cannot seem to locate this element their either.
Any guidance one how to add this functionality back in would be greatly appreciated!
Update: Here is a screenshot of what the DOM looks like when I try to select the element.
The div below the one I have highlighted only selects the pictures and captions between the arrow buttons.

I did got to Yahoo.com, and tried inspecting the element that you have shown. I was able to inspect it normally. [ Im using Chrome, on Mac - Yosemite ].
Here is the code that I found. May be you can use that.
<button type="button" class="FilmstripBtn NextBtn ButtonNaked Wpx-20 Pos-a End-0 T-0 B-0 Fz-30 Z-1 " data-jump-to="next" title="Next" data-action-outcome="pgnt" data-ylk="t1:a3;t2:td;t3:nav;sec:td-fea;elm:btn;elmt:ne;itc:1;" data-rapid_p="6" id="yui_3_12_0_1_1431061078340_1326"><i class="Icon W-a" id="yui_3_12_0_1_1431061078340_1329"></i></button>

Made a little progress. For some reason Chrome still won't let me right click inspect element (maybe a bug), but I was able to find the buttons in the elements tab. They are actually "a" tags and not buttons on my end.
I had difficulty before because they are labeled differently for me than what is shown from the other response to this question, and the "a" tags won't become highlighted unless I expand the divs and select the actual "a" tag (possibly another chrome bug?).

Related

Selenium iFrame input text

I am using Selenium to build a test automation where the html is in an iFrame, I was able to find online the lines of code to activate the iFrame, click on a link, and press a button and they are working fine -see following lines:
driver.SwitchTo().Frame("06634000000BVL6");
driver.FindElement(By.LinkText("Loan Details R1")).Click();
driver.FindElement(By.XPath("//button[contains(.,'Edit')]")).Click();
I needed to input a text within a textBox in that iFrame, but I couldn't handle the ID or the Class, below is the HTML for the input:
Any thoughts ?
Thanks for your help
I can't comment yet, so this will be part answer, part comment.
Based on what you have posted, it looks like you may not be in the correct iframe and we don't have enough of the code from the webpage to tell if there is an additional iframe.
I'd also like to see the code you are using to write text to the field, you may have an issue there.
If you don't and the only issue you have is the selector then try the following. Go get the developer version of firefox. Navigate to your webpage in firefox. Inspect the element where you want to write text to. Once you are in the inspection screen, there is a path bar that can scroll left and right at the bottom of the screen. Check that to confirm that there is only the one iframe you mentioned and that you are in the correct iframe. If that is the issue, you should be good to go, you're code above works for switching between frames. If you are in the right iframe, then try a different method of finding the element for the text box. I have had the most success with hard to find elements by using the cssselector. To get the cssselector for the element right click on it, navigate to copy and then cssselector. From there your code should look like this (using c#):
driver.FindElement(By.CssSelector("INSERT CSS SELECTOR HERE")).SendKeys("Text");

Invisible html element on "view page source"

I am trying to read an html page in my java code using Jsoup library. This is the link to the page: http://www.alkhaleej.ae/
The part in the page that I am interested in is the horizontal menu bar at the top of the page (which has the news categories). When I right click on that menu bar and choose inspect element, the html elements of interest are visible to me under the tag <div id="MainMenuCenter">. However, when I run my code, it turns out this tag is actually empty, and all the children of this tag get invisible. I also tried to view the complete document using "view page source" on the webpage. I surprisingly found this element empty (no children) as below.
<div id="MainMenuCenter">
</div>
Therefore, I am not able to access the information I need in my code. What is really going on? Did the developers hide the children of this element on purpose? Can you suggest a way to make the children visible to my code? Thank you.
You can retrieve the data by looking at the network traffic on
Inspect element -> Network
Check the traffic one by one or use the find tools.
If you find the match data, you can re-obtain it by visiting the url who serve the data..
Maybe like: http://example.com/serve.php?category=car&page=1

Inspect font/text of a pop-up bubble displayed when a required field is missing value - using Selenium WebDriver

Using Selenium-Java 2.47.1, I see this pop-up bubble/balloon that gets displayed whenever the 'submit' button is clicked and a required field is missing a value. I'm unable to inspect the bubble with firebug or DevTools. I need to be able to get the text and font.
Here is a link to an image of the bubble, it's very simple, I just can't seem to figure this out. Any help is appreciated, thanks!
In Firebug you can select Break On Mutate in the HTML tab (The pause button with brackets). Click the submit button, and Firebug will tell you what element is being added.

Selenium: Clicking on toaster issues

I'm trying to click on an element on a page; the element is clearly visible on screen. There is a toaster that might pop up, so I'm trying to write a defense: if the toaster is on screen, close the toaster first, then continue clicking through to the next page. I am using PageFactory, so I have an element to contain the toaster and one for the close button for the toaster. My "deal with toaster" method is as follows:
if (driver.findElements(By.cssSelector("#toaster")).size() > 0
&& toaster.isDisplayed()) {
toasterClose.click();
}
When I do this in chrome, however, I'm getting org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (994, 758)
Pausing the test execution, I cannot see the toaster on the screen. I figure the devs must be hiding it by making it render in a far away, unscrollable location. So as a stopgap measure, I added a condition that if the x coordinate was greater than 800, don't click. With that in place, I get:
org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (547, 725). Other element would receive the click: <div id="toaster">...</div>
What's going on? How can the toaster not be clickable but would somehow receive the click anyway? Firefox can handle the test just fine, with or without the 800 pixel workaround; it's only Chrome having this issue.
For Clarification: The goal of the test is NOT to click the toaster. The goal is to click another element on the page. The test reported that a toaster was in the way, so I attempted to write a step to close the toaster if it is displayed. I have not seen this toaster, so I'm not exactly sure what it is, but chrome keeps reporting that it's in the way. All our toasters site-wide use a basic template that includes a close button so the user can close the toaster, which is what I'm trying to click. Firefox never has this issue and does not report the existence of any toasters.
I'm calling it a toaster because that's what our site calls it, because that's what it's called in whatever framework we got it from (jQuery UI? Backbone?). If I pause execution, I cannot see any toasters at this point in the test, but jQuery tells me it exists and is visible. However, the element found with jQuery has just the default pieces of our toaster setup: a div, an empty div where the message should be, and the close button. Clearly it's not meant to be rendered at this time, but Chrome thinks it's in the way.
I'm assuming by "toaster" you mean some sort of javascript modal popup with a close button.
Identifying the correct problem
You're testing the existence and visibility of the #toaster element, but not the toasterClose element that you're clicking. There's no guarantee that just because one element exists and is displayed, another is as well. From the error, it appears that the #toaster element overlaps the toasterClose element, making it unclickable.
Troubleshooting clickability
Once you've properly selected toasterClose, manually use devtools and inspect to see why it's unclickable. Is it visible and unobstructed? Is the toasterClose element something of zero height/width? Is there dynamic JavaScript modifying the page post-load? Is it actually positioned in view of the page? (I've had elements render visibly at the edge of the window only to be obstructed by the browser's scroll bars.1)
Alternative
You should also see if you really need to use this toasterClose element. How does would a human close this popup? Would they press Escape? Would they click outside the popup window, on the overlay element? Do they do something else that triggers some sort of closeModal() javascript function? You can also do any of these things using Selenium.
Last Resort
One thing you can always do to remove such a popup is to run your own javascript to modify the DOM and remove the offending element(s) altogether:
driver.execute_script(<<-javascript)
var toaster = document.getElementById("toaster");
toaster.parentNode.removeChild(toaster);
var overlay = document.getElementById("modal_overlay");
overlay.parentNode.removeChild(overlay);
javascript
Future/Additional
If this is a regular issue for you, I would suggest wrapping this code in try/catches and a retry mechanism to make it resilient to javascript dynamically loaded elements.
1 Update
Just to elaborate on the scrollbar issue I had, because it turned out that it was a very similar problem to yours.
Here, the "I'm Feeling Lucky" button is out of view. If Selenium tries to click on it, first it will attempt to scroll it into view.
Here's an example of what Selenium would attempt to do. Notice how the button is now "in view".
However, Chrome on OSX is styled in such a way that the scrollbars are normally hidden. The moment that Selenium issues the scroll command, the scrollbars appear and the following click command fails to reach the button.
The solution was to use javascript to scroll the window manually:
page.execute_script(<<-javascript)
document.getElementById("gbqfsb").scrollIntoView(true);
// or if that doesn't work:
window.scrollTo(0, document.getElementById("gbqfsb").getBoundingClientRect().top);
javascript
Try the following code. Should work:
if (driver.findElements(By.cssSelector("#toaster")).size() > 0
&& toaster.isDisplayed()) {
Actions builder = new Actions(driver);
builder.moveToElement(toasterClose).moveByOffset(2,2).click().build().perform();
}
Can you close toaster using escape key from keyboard manually.
If you can than use following:
Actions action = new Actions(driver);
action.sendKeys(Keys.ESCAPE).build().perform();
It seems the toaster was partially rendered and fixed to the DOM just below the bottom edge of the screen, using position:fixed to stop it from showing up until it's ready to be populated with data and animated onto the screen. When chrome tried to click on links that were below the bottom edge of the screen, it predicted that it'd hit the toaster and didn't actually bother scrolling.
After some googling, I added the following utility function:
public static void ScrollElementIntoView(WebDriver driver, WebElement element) {
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
}
Then I call this method before clicking any link on that page, and voila, no more toaster problems!

Selenium Webdriver - unable to select an option from the list box

I am trying to select an option Pune(PNQ) from "Leaving from" list box of this page
http://book.spicejet.com/
driver.get("http://book.spicejet.com");
Thread.sleep(50000);
Select S = new Select(driver.findElement(By.id("ControlGroupSearchView_AvailabilitySearchInputSearchVieworiginStation1")));
S.selectByValue("PNQ");
But I am receiving this error:
org.openqa.selenium.ElementNotVisibleException
I am new to Selenium. Please help.
Straight from the Selenium source -
/**
* Thrown to indicate that although an element is present on the DOM, it is not visible, and so is
* not able to be interacted with.
*/
public class ElementNotVisibleException...
As it says, the element is there on the DOM, but not visible to operate with. If there a preemptive action you have to take before that element exists, then do that.
An example would be Google image searches. When you click on an image, a black box appears with the picture. That element is always there, but you have to click on an image to make it appear.
Sounds like the same thing is happening with your select box.
Edit
I took the liberty of further looking at your particular issue.. it looks like that site hides that <select> tag because it's filled in by some jQuery stuff.
Instead of using the select tag and selecting by value, do,
driver.findElement(By.id("ControlGroupSearchView_AvailabilitySearchInputSearchVieworiginStation1_CTXT").sendKeys("PNQ");
driver.findElement(By.cssSelector("a[value='PNQ']").click();
Hope this helps.

Categories

Resources