How to increase HTML table column width using webdriver

Question

Currently I'm trying to automate a step involved to increase HTML table column width using Selenium webdriver.

Got to know that I can get the index of x and y coordinate with findElement(By.cssSelector("<Css locator>").getLocation();

But I'd like to know if it was possible to use the same concept to increase the width of a column.

Answer 1

You can use the Javascript Executor

WebDriver driver;
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.querySelector('<CSSLOCATOR>').setAttribute('width', <WIDTH>)");

where you fill in <CSSLOCATOR> and <WIDTH> with what you need.

Answer 2

Answer to my question is simple usage of jquery

$(selector).width(value) ;

Example usage String aScript = "jQuery(\\"" + CSS_TABLE_HEADER_BY_COL_NAME + "\\").width(%s)";

jse.executeScript(aScript );

Hope this should resolve most people of increasing column width in selenium.

Answer 3

If its static table then we can add attirbute (not setAttribute, because we need to add new attributed 'width') 'width' with that tag.

String tableJS = "document.getElementsByTagName('table')[0].style.width='1000px'";
js.executeScript(tableJS);

Note: If cell OR table width is handled by external CSS then this may not work.

2nd Way:If we have resizble table, then we can find the element of 'resizer' and apply below solution by using Action class:

if (resizeableElement.isDisplayed()) {
            Actions action = new Actions(driver);
            action.clickAndHold(resizeableElement).moveByOffset(100, 100).release().build().perform();
        } else {
            System.out.println("Element was not displayed to drag");
        }