CODEWITHSUNDEEP
vaadinvaadin7
King Midas
King Midas

Reputation: 1689

How can I show a hidden column of a grid using the Vaadin Testbench?

I am doing some integration tests, and I have replaced some tables with a grid. At this moment, I have some visible columns by default and other columns are hidden as follows:

column6.setHidable(true);
column6.setHidden(true);

Now I am trying to do some integration tests. For getting the grid, I can use the method (is the only grid present in this view):

$(GridElement.class).first();

This works fine. But for my test (with Vaadin Testbench), I need to check some values that are inside the hidden columns of the grid. I am talking about this button:

enter image description here

I have tried to use the Vaadin debug console to get the name of the button that allows the user to show/hide columns, but the debug console only can select the entire grid element, not this menu.

Also I have check if inside the GridElement exists any kind of already implemented method that give me access to this menu without any success.

Upvotes: 0

Views: 1071

Answers (1)

Morfic
Morfic

Reputation: 15508

Usually, chrome developer tools (or similar for firefox and ie / edge, etc) is your best friend in such cases. So far I'm not aware of anything dedicated for that particular button. However you can workaround this limitation by selecting the items which compose this feature by their specific classes:

chrome developer tools

The below test method shows a quick implementation which should give you a starting point:

public class GridManipulationTest extends TestBenchTestCase {

    @Before
    public void setUp() throws Exception {
        System.setProperty("webdriver.chrome.driver", "D:\\Kit\\chromedriver_win32\\chromedriver.exe");
        setDriver(new ChromeDriver());
    }

    @After
    public void tearDown() throws Exception {
        // TODO uncomment below after checking all works as expected
        //getDriver().quit();
    }

    @Test
    public void shouldOpenGridColumnVisibilityPopupAndSelectItems() {
        // class for the grid sidebar button
        String sideBarButtonClass = "v-grid-sidebar-button";

        // class for the sidebar content which gets created when the button is clicked
        String sideBarContentClass = "v-grid-sidebar-content";

        // xpath to select the item corresponding to the necessary column
        // there are perhaps more "elegant" solutions, but this is what I came up with at the time
        String columnMenuItemXpath = "//*[contains(@class, 'column-hiding-toggle')]/span/div[text()='Name']";

        // open the browser
        getDriver().get("http://localhost:8080/");

        // get the first available grid
        GridElement firstGrid = $(GridElement.class).first();

        // look for the grid's sidebar button and click it
        firstGrid.findElement((By.className(sideBarButtonClass))).click();

        // the sidebar content is created outside the grid structure so don't look for it using the grid search context
        WebElement sidebarContent = findElement(By.className(sideBarContentClass));

        // look for the expected column name and click it
        sidebarContent.findElement(By.xpath(columnMenuItemXpath)).click();
    }
}

And of course what it looks like in action

Testbench grid column menu selection

Upvotes: 1

Related Questions