How to check hidden element with Selenide and JavaScript

1. Inspect element in DeveloperTools or Firebug
2. Consider which attribute of the element you need to change to make it visible
3. Experiment with javascript console (DeveloperTools/Firebug > Console)
document.getElementsByName('some name');
document.getElementsByClassName('some class');
document.getElementById('some id');

Then change the attribute type:
// type='hidden' >> type='display'
document.getElementsByName('some hidden element')[0].type='display';

[0] - to get element with index 0 from "getElements..."

4. Use executeJavaScript() with JavaScript expression

executeJavaScript("document.getElementsByName('some hidden element')[0].type='display';"); 

The element is visible now. Done. 




Example: Check hidden quantity field in Cart. 
Object:  (demo) http://demo.prestashop.com


public class HiddenElementsTest {

    @Test
    public void testHiddenElementValue() {
        open("http://fo.demo.prestashop.com/en/blouses/2-blouse.html#/8-color-white/3-size-l");

        // go to Cart
        $(By.xpath(".//*[@name='Submit']")).click();
        $(By.xpath(".//*[@title='Proceed to checkout']")).waitUntil(visible, 2000).click();

        // use javascript to change hidden element to displayed
        executeJavaScript("document.getElementsByName('quantity_2_12_0_0_hidden')[0].type='display';");

        // now this element can be searched with selenide $
        int hiddenQtyValue1 = parseInt($(By.name("quantity_2_12_0_0_hidden")).getAttribute("value"));
        int qtyValue1 =  parseInt($(By.name("quantity_2_12_0_0")).getAttribute("value"));
        System.out.println(hiddenQtyValue1 + " " + qtyValue1); // "1 1"

        // add +1 item to Cart
        $(".icon-plus").click();

        // if you try to get the elements values you will find that the values have not changed yet
        int _hiddenQtyValue2 = parseInt($(By.name("quantity_2_12_0_0_hidden")).getAttribute("value"));
        int _qtyValue2 =  parseInt($(By.name("quantity_2_12_0_0")).getAttribute("value"));
        System.out.println(_hiddenQtyValue2 + " " + _qtyValue2);  // "1 1"

        // it is important to wait some time for changes in values. Lets wait while "2 products" text appears on the page
        $("#summary_products_quantity").waitUntil(hasText("products"), 2000);

        // values changed
        int hiddenQtyValue2 = parseInt($(By.name("quantity_2_12_0_0_hidden")).getAttribute("value"));
        int qtyValue2 =  parseInt($(By.name("quantity_2_12_0_0")).getAttribute("value"));
        System.out.println(hiddenQtyValue2 + " " + qtyValue2); // "2 2"

        assertEquals(hiddenQtyValue1, qtyValue1, "Incorrect qty");
        assertEquals(hiddenQtyValue2, qtyValue2, "Incorrect qty after adding 1 item");
        assertEquals(hiddenQtyValue2, hiddenQtyValue1 + 1, "Hidden qty is not changed");
        assertEquals(qtyValue2, qtyValue1 + 1, "Qty is not changed");

    }
}