I’m working on an application that allows you to enter an automatic date. To test this application, I must follow a scenario that allows to select a specific date (e.g: 15/12/2021) by clicking on it.
For this I use a datepicker from the bootstrap library.
datepicker
But it is impossible to inspect this element, because, once displayed, it disappears with the slightest mouse click in the window, so that when I right-click on the datepicker to inspect it I lose the focus on the element that disappears.
Here's the inspector (when I want to open the div, the datepicker disappears):
inspector HTML code
How could I inspect this datepicker to create selectors?
Best regards
Use Chrome:
1. Right click Inspect
2. Go to Elements tab
3. Click on datepicker element (and watch what element is highlighted in the Elements tab)
4.Right click on that element in Elements tab and select Brake on - one of the options should work
5. Click on that datepicke element and Debugger should start
6. Click on Play until Your element is loaded
7. Inspect
For example:
Go to google.com
To inspect google apps selection:
1. Inspect page and switch to Elements tab
2. After clicking App selection button you will see that class="fade-in" is highlighted
3. Right click on this element in Elements tab and select Brake on - > attribute modification
4. Click on App selection again and You will see debugger appear
https://ibb.co/D7V3P3C
5. Click on Resume script execution but in the Inspector (Red bounding box on the pic) not on Debugger in main screen, until App selection is not showed
6. Then You can inspect Apps as You wish
You could also use EventListeners to set break on them.
Related
In the following ecommerce site "https://www.gittigidiyor.com/", I want to click on "giris yap" button using selenium java but the problem is whenever I hover the mouse to profile icon, this pop-up appears and i try to inspect the pop-up to see the element but nothing happened. Could you please help me how can i click the buttons of this pop-up. I tried by switching to alert/frame but it did not workopened login popup in the site
driver.get("https://www.gittigidiyor.com")
driver.findElement(By.cssSelector("[title=\"Giriş Yap\"]")).click()
WebDriverWait wait = new WebDriverWait(driver,30);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("[data-cy=\"header-login-button\"]"))).click();
To find the element use below technique:
To search xpath of such dynamic elements use DOM break points:
And select break on subtree modification. Now all changes will break and pause the webpage rendering
Click resume execution or press f8 till your span gets displayed
It was suggested that this had already been answered and then my question was closed.
I've looked at all of the links and I don't see an answer there. Please don't close my question unless you're absolutely sure it's been answered.
Why XPath does not highlighted the yellow mark in Chrome84? (2
answers)
Chrome 84 Inspect element, find results not highlighted in
yellow like before (6 answers) Chrome DevTools not find elements not
search)
I'm writing some Selenium code and need to get the CSS Selector for an item on a page. So I bring up the page and go into Tools mode. It doesn't matter which browser I use - Chrome, FireFox, Edge - when click on the "Pick an element from the page" button (to the left of the Inspector in FireFox) and then click on the item I need the CSS Selector for I see the element in the tools section, but as I'm right-clicking it and choosing Copy->CSS Selector, the table it's in collapses (in a second or two) and I no longer have access to the item I clicked on. I've tried manually expanding the TR in the tools view and drilling down to the TD I need, but the same thing happens.
Anyone know of a way to stop this from happening? I was quick enough to copy a few yesterday but for some reason it seems to be happening faster today and I'm not able to catch it.
Right-clicking the item and choosing Inspect Element was also suggested but that does the same thing. The item shows up in the tools section for about 2 seconds and then the table collapses.
When the element tree collapses, it is a sign that it got updated. This happens, for example, when an iframe's URL or document is changed or the child tree structure gets replaced via JavaScript.
In order to stop this from happening, you can stop the JavaScript execution on the next execution once you see the element you want to inspect. Then you are able to inspect the element using the inspect button.
Firefox
Switch to the Debugger panel.
Once you see the element you want to inspect, click the Pause button or press F8.
Cause the JavaScript execution to stop (e.g. by interacting with the page). You can see that the JavaScript execution is stopped when there is a white overlay on the page and a hint saying Paused at Execution.
Once the execution is stopped, click the Pick an element from the page button in the toolbar or press Ctrl+Shift+C.
Click the element you want to inspect.
Chrome/Edge
Switch to the Sources panel.
Once you see the element you want to inspect, click the Pause script execution button or press F8.
Cause the JavaScript execution to stop (e.g. by interacting with the page). You can see that the JavaScript execution is stopped when there is a hint on the page saying Paused in debugger.
Once the execution is stopped, click the Select an element in the page to inspect it button in the toolbar or press Ctrl+Shift+C.
Click the element you want to inspect.
I found a semi-workable solution. When the item appears in the tools window note it's name before it disappears. Then go to the Search HTML box and type it's name. It still appears and then disappears, but it seems to stay visible longer.
I want to inspect the YouTube settings menu element in chrome-developer with c# selenium.
The YouTube settings menu element appears on mouse click, but disappears if the mouse is moved out, so I cannot inspect the element in chrome-developer.
Any ideas?
ctrl+shift+i, then try the "Sources" tab, then go to the file you're trying to debug, then add line breakers. Next refresh the page. Here's an image of what we're looking for, inspected the google.com page for this one.
Once you have reached the line break for the mouseclick on the debugging, you can go to the elements tab, it should have the elements currently paused on the screen.
Visual studio and Chrome Browser as half of the Width of window
Breakpoint after click
At chrome browser, press F12 for inspect
We can find the settings dialog element in inspect tools area.
We must not click the html body area(Red Area) while debugging.
The web page that I am using has a list of links
My use case is to perform page down operation and select the link at that location.
I performed page down using the following command
storeEval with the Target as selenium.browserbot.getCurrentWindow().scrollTo(0,20000)
The above action performs the page down
My next action is to click the link that is shown
I used the command clickAtAndWait with the target link=target_link
The above action clicks the text target_link at the top of the page (which is not visible) and not the text that is visible.
I need to perform page down and click the text target_link that is visible.
What change needs to be performed for this action?
In the Selenium IDE you can use the Command focus with a Target value of an element at the bottom of your page.
For example:
Command: focus
Target: id=nextButton1
Value:
This will scroll the Selenium IDE (Firefox) window down so the "Next Button" is just visible at the bottom of the screen. The Value parameter is not used and has been left blank.
You need to find the element and then use the click command.
Sample code:
elem1 = driver.find_element_by_class_name("wtb-search-submit")
elem1.click()
Read at http://selenium-python.readthedocs.org/en/latest/locating-elements.html on how you can locate the element. Hope it helps.
I use Selenium to test some web-product in my company.
Product has button, which open dialog to choose color. I think it's created using 'extJS' (I'm not so sure).
But then i click to any part of that button, using Webdriver, it's always just set current selected color, but newer opened dialog window to select color.
I found similar button on some random site, which has similiar behavior.
Link to site with button on developer.yahoo.com
So in source of the page you can see, that there is no specific element for right part of button, with down-oriented arrow.
So xPath
//*[#id='color-picker-button']
describe button in all,right part and left part.
But every child element of this describe only left part of this button, so right part with arrow has no any specific xPath to click in my WebDriver text.
I also tried things like
driver.action.move_to(element, coordinate_right, coordinate_down).perform
but it has no effect for me.
So in general my question is :
How to open color selector window on that Yahoo page
Use the SendKeys() method and send the "down arrow" key to the control (C#):
element.SendKeys(Keys.ArrowDown);
That should open it right up.