3

im using selenium to automate some website. There is one dorpdown that is giving me hard time since it it not the native one, cause they used some custom designed one. so I need to set its css class to hidden so I can get to the native one easily.

this is before I clicked on it:

enter image description here

this is after:

enter image description here

so now how do I do it automatically with js? I tried something like this that didnt work :

 var js:JavascriptExecutor = driver.asInstanceOf[JavascriptExecutor]
    js.executeScript("$('.selectpicker select').removeClass('bs-select-hidden')")

thanks

Joe
  • 2,543
  • 3
  • 25
  • 49
  • You shouldn't try to force the class change. You should interact with the page as a user would. That's how Selenium is designed. What would the user do that changes the class? – JeffC Oct 15 '15 at 18:05

2 Answers2

1

You are using the wrong CSS selector: ".selectpicker select" means "the select elements child of elements having the selectpicker class"

you want the select element having the selectpicker class.

execute this javascript :

$('select.selectpicker').show();

it will set "display:block" on this element and it will be visible.

Edit

from the selectpicker doc (https://silviomoreto.github.io/bootstrap-select/). Hide the custom select & show the native one. As the select has display:none!important we need to force it to show.

There is three way of doing it:

  • remove the specific classes "selectpicker" and "bs-select-hidden" that makes it hidden.

    $('select.selectpicker').selectpicker('hide')
                        .removeClass("selectpicker bs-select-hidden");

  • remove all classes (may break the layout)

    $('select.selectpicker').selectpicker('hide')
                        .removeClass();

  • force display:inline-block (default display value for selects)

    $('select.selectpicker').selectpicker('hide')
                        .css("display","inline-block !important");
Apolo
  • 3,844
  • 1
  • 21
  • 51
  • its not working...nothing happens. just to make sure, I want to hide the non-native dropdown :) – Joe Oct 15 '15 at 13:12
  • But do you want also the native one to appear ? – Apolo Oct 15 '15 at 13:23
  • yes I do, but this command you gave me didnt work for this :/ – Joe Oct 15 '15 at 13:27
  • can you give us the url to test please ? – Apolo Oct 15 '15 at 13:28
  • i wish I could body, its the comp I work for system and it has a login with username and pass. any info I get out for you..? i guess from the screenshots you can understand allot – Joe Oct 15 '15 at 13:30
  • It is working on their own website. Can you confirm that this is a bootstrap select ? – Apolo Oct 15 '15 at 13:34
  • we have progress :) but now its hiding the whole dropdown...i see nothing...I want only to hide the custom and leave the native – Joe Oct 15 '15 at 13:41
0

You could simply set the elements class to nothing.

document.getElementById("whatever").className = "";

or if you wanted to keep a particular class you could just reset the class

document.getElementById("whatever").className = "";
document.getElementById("whatever").className = "classToKeep";

check this Remove CSS class from element with JavaScript (no jQuery)

or if you used jquery 

$( "id/class" ).removeClass( "blue under" );
Community
  • 1
  • 1
Arun
  • 1,177
  • 9
  • 15
  • i used jquary, and this didnt work...$( "id/class" ).removeClass( "blue under" ) – Joe Oct 15 '15 at 13:13
  • check this http://stackoverflow.com/questions/3677389/jquery-dropdown-remove-class-after-disappears – Arun Oct 15 '15 at 13:30