how to deselect a css style using javascript?


Tags: javascript,jquery,css,selenium,selenium-webdriver

Problem :

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



Solution :

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");
    

    CSS Howto..

    How to center a navigation bar properly? [closed]

    Understanding how Flexbox works with Bootstrap

    How to place circle and text in one line?

    Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How do you change the modal link color in Foundation?

    HTML CSS - How to render SQL nicely [closed]

    How to get the CSS style from Inspect Element

    How can I change the color of a DecoratorPanel in GWT?

    how can I make my image (down arrow) disappear when I start scrolling my page?

    How can I exclude certain elements from css property that has been applied to their parent without using the style attribute

    How can I use CSS to show and hide multiple elements at once?

    How To Select Two classes with CSS?

    How to expand wrapper when content is more?(with CSS)

    How to import CSS from node_modules in webpack angular2 app

    How can I change the entire background color of a page?

    how to get image to show up to the left of panel (both in same row)

    How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    HTML/CSS: How to use another font for list-item Bullets

    How to prevent CSS hover style from firing unless hover time reached as defined in jQuery routine?

    How to make a multi category filter with JQuery, HTML and CSS

    How to define the width of a HTML element dynamically

    How to change CSS with jquery?

    How can I center a div

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    CSS - How to apply box-shadow to a image rounded

    How to find out if an element is in a fixed positioned container?

    How can I use development tools to find css class of a plugin item

    PHP: How to style session output [closed]