CODEWITHSUNDEEP
javascriptdomselenium-webdriverfirebuggoogle-chrome-devtools
Chakra
Chakra

Reputation: 2557

How do i grab the ID of an element which reacts to OnChange

PS:- It was a CSS code which was activated by clicking on a widget. Thanks. Once i came to know that it was CSS, the widget name and the action (hover) i was able to manage.

Question before the above PS:-

I have a widget on change of which a side bar Menu slides out. I want to get the ID of this element to program in Selenium. But to use Firebug, or Chrome 'identify element' i need to place the mouse on the widget. However as soon as i approach NEAR the widget it activates the side bar and i don't get to know the ID of this element.

What are the ways to get hold of this widget's identity?

I tried disabling Javascript as suggested by answer below, but it didn't help. Maybe this is the code which is enabling the slider :-

#content-wrap1 {
  position: fixed;
  z-index:999;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#sidebar1{
  position: fixed;
  z-index:999;

  top: 0px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#content-wrap1:hover {
  left: 50px;
  z-index:999;
}
#content-wrap1:hover #sidebar1{
  left: 0;
  z-index:999;

Upvotes: 0

Views: 136

Answers (1)

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

If the slideout is done with Javascript, you can temporarily disable Javascript and then check the id.

Another approach is to click on the surrounding element and then approach the element in the source view.

Update:

It seems the slideout is done with CSS transition. You can lookout for selectors with the :hover pseudo selector.

In this case the id seems to be content-wrap1 

#content-wrap1:hover {
  left: 50px;
  z-index:999;
}
#content-wrap1:hover #sidebar1{
  left: 0;
  z-index:999;

The sidebar1 is shown, when the mouse hovers over content-wrap1.

Be aware though, that this is just guesswork.

Upvotes: 1

Related Questions