Selenide test fails to interact with Material`s checkbox - material-ui

Dear stackoverflowers.
We are using Selenide framework in our project to write automation tests for UI.
We switched to Material-UI recently and faced with technical problems when it comes to simple checkbox.
I am trying to select checkbox.
SelenideElement rememberMeCheckBox = $(By.cssSelector("input[type=\"checkbox\"]"));
rememberMeCheckBox.setSelected(isSelected);
But while doing that I get an exception:
Element should be visible {input[type="checkbox"]}
Element: '<input type="checkbox" value="on" displayed:false></input>'
And indeed when I check the real DOM it contains opacity: 0:
When I set the opacity by force my automation tests works well. How to deal with that ?

It's not a Selenide problem, but a common Selenium problem.
Selenium defines elements with "opacity: 0" as invisible.
See How to force Selenium WebDriver to click on element which is not currently visible?
One simple way to enable this checkbox is to click its parent element:
$("input[type=\"checkbox\"]").parent().click();
At least it works for me.

Related

Locate elements inside Shadow-root using Protractor

Most of my application's elements are under shadow-root(open). I need to automate them using Protractor framework. deepCSS didnt work out. Please help me with automating these elements - mostly click.
I have to click on shadow-root elements using my protractor automation framework. I tried deepCSS, xpath etc. nothing worked.
var spanElem = element.all(by.deepCss('.heading'));
spanElem.click()
//browser.actions().mouseMove(spanElem).click().perform();
Similar questions:
deepCss is failing to identify an element inside the shadow root in Protractor
Protractor: Unable select input element inside a shadow DOM (Polymer) using by.deepCss('input')
It seems Shadow DOM is not yet well supported by protractor. The Second question has an answer pointing to this issue https://github.com/angular/protractor/issues/4367 and a workaround for adding a custom locator by.addLocator('css_sr', (cssSelector: string, opt_parentElement, ..... I confirm this works in my case too.

Protractor tests stop working when opening a component that has an ag-grid

We use the ag-grid in different parts of our site and with protractor tests where a test opens a component that contains the ag-grid the test freezes and nothing happens anymore. The test case is not being completed.
This happens as soon as the ag-grid is getting initialized. If I remove the grid, then the test case continues fine. This behavior is the same in every location where we're using the ag-grid.
Is this an issue or what else could be wrong here?
I have not found a way around this, but I can tell you its related to the setTimeout underneath the hood. I wound up using browser.ignoreSynchronization = true, and then doing specific Waits with ExpectedConditions.presenceOf. Very sloppy and hopefully ag-grid fixes this at somepoint.

Wicket select2Choice component truncates selection

I need to slightly modify the behavior of a wicket select2Choice dropdown component.
When you've selected a choice if the choice is longer than the window, you see your choice truncated with elipses.
I'm wondering if its possible to do one of the following:
1) Make the choice scrollable
2) Add a title (e.g. tooltip) to the field with the value of the full choice.
Please note that I've attempted to do this through the developer tools in IE and have been mostly unsuccesful as far as scrolling goes. When a manually add a title attribute on the div with the class "select2-drop-mask" in the markup, I'm able to get a title. When I attempt to add that same title in wicket it does not show up. I believe this is because the select2choice is made up of more than one piece of mark up and through wicket there is no way to isolate that one piece of markup.
Any advice would be greatly apprecated.
Here is my Java wicket code for this component.
final FormComponent dictionaryEntryField = form.newSelect2Choice(form, "dictionaryEntry", SimpleAjaxEventHandler.get(),
new PropertyModel<String>(dictModelBean, "dictionaryEntry"),
new DictTextChoiceProvider(dictModelBeans), 300,
new ResourceModel("dictionary.mapping.dictentry.label"), LabeledFormField.LABEL.LEFT);
dictionaryEntryField.setRequired(true);
dictionaryEntryField.add(new AttributeModifier("title", new Model("Test Title")));
I'm never able to see the mouseover.
The following is a section of the markup that is created by wicket.
title="Test Title" was added manually through IE developer tools and
I'm able to see the title on mouseover.

Problems while working with Webdriver on HTML 5 and ExtJs

I am working on an application which is developed in ExtJs and is a HTML 5 type.
I an confronting a problem while interacting with button clicks and selecting drop down elements where only one option is present in the DD list.
Is this a problem with my Webdriver Code
Is this a problem with Eclipse (By Kepler)
Or is this a problem of HTML 5 or ExtJs
If driver.findElement(By.something).click(); is not working for you you cant try click through java script:
((JavascriptExecutor)driver).executeScript(script, element);
Example:
WebElement element = driver.findElement(By.id("MainButton"));
((JavascriptExecutor)driver).executeScript("arguments[0].click()", element);
HTML 5, at the time of writing, is not fully supported with Selenium IDE. A good
example of this is elements that have the contentEditable=true attribute. If
you want to see this, you can use the type command to type something into the
html5div element. The test will tell you that it has completed the command but
the UI will not have changed

WebDriver GWT TabPanel Issue

I'm trying to create a WebDriver Test for a GWT application which uses a TabPanel. Clicking on a tab works fine in the IDE (it uses the x-path to find the tab) however I cannot get the tab click working in the JUnit test.
All elements have a debugID including the Tabs (although tab id's do not appear to work even in the IDE) and I'm inheriting com.google.gwt.user.Debug. I've attempted to locate by Xpath which is the IDE default.
genericElement.findElement(By.xpath("//div[#id='gwt-debug-mainTabPanel']/div[2]/div/div[6]/div/div")
I've tried the code outlined in the documentation
genericElement.findElement(By.id("gwt-debug-mainTabPanel-bar-tab6")
I've also attempted a moveToelement(as clickAt is no longer supported) and click but that falls over too(unless I'm misunderstanding it). I'd also like to avoid this as it seems bad practice.
Actions builder = new Actions(driver);
genericElement = driver.findElement(By.id("gwt-debug-mainTabPanel"));
Action action = builder.moveToElement(genericElement,400, 370).click().build();
action.perform();
java.lang.UnsupportedOperationException: Moving to arbitrary X,Y
coordinates not supported.
I know GWT and Webdriver aren't getting along too well - but I feel like this will have a solution. Can anyone offer any help - has anyone implemented a working Webdriver test in which they click a tab in a GWT TabPanel?
EDIT
I've managed to locate the node using Firebug and xpath locators ( you can add /..to move to the parent gwt-TabLayoutPanelTabInner or add /../.. to mover to grandparent gwt-TabLayoutPanelTabInner and it should still work - it does in the IDE)
genericElement = driver.findElement(By.xpath("//div[contains(#class,'gwt-HTML') and contains(text(),'Users')]"));
However not the click doesn't change to the required tab - seems to be a known issue (likely don't need both moveToElement and click(genericElement) - hust giving it a shot)
Actions builder = new Actions(driver);
builder.moveToElement(genericElement).click(genericElement).build().perform();
See section 3 ....This is fun :)