Selenium: Chrome 71 [ClearText does not work for REACT input box]

[ckzgraphics]

🐛 Bug Report

While running test against a REACT webpage on Chrome 71 + Windows 10, 'clear text' command does not clear the input box contents.

To Reproduce

Detailed steps to reproduce the behavior:

[In Chrome 71 + Windows 10]

1. Open URL- https://foxhound87.github.io/mobx-react-form-demo/dem
2. Use 'Clear Text' command (POST /session//element//clear)

Expected behavior

The text should be cleared from the text box.

Test script or set of commands reproducing this issue

You can use the following GIST to replicate the issue- https://gist.github.com/ckzgraphics/418cf54ed3a60f057fcc0834e9bef010

BrowserStack Session [executed on REACT webpage][FAILED]- a21750b06f9ec90ccc35c62c7f83da534bb7b253

Selenium Logs (for the above session)- https://gist.github.com/ckzgraphics/1968040180812899dc771df69ff5f7eb

BrowserStack Session [executed on SIMPLE webpage][PASSED]- e3f6831f153a002d874a6fcc50ee37f8feeaadb2

Selenium Logs (for the above session)- https://gist.github.com/ckzgraphics/1589742d8ca96836018237e1057548e9

Environment

OS: Windows 10
Browser: Chrome
Browser version: 71
Browser Driver version: 2.44

Language Bindings version:
java version "1.8.0_161"
Java(TM) SE Runtime Environment (build 1.8.0_161-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.161-b12, mixed mode)

Selenium Grid version (if applicable): 3.14.0

[yboi]

The same an issue when using pytest.

[barancev]

Yes, this input is tricky...

      WebElement ele = webDriver.findElement(By.xpath(".//input[@name='username']"));
      new Actions(webDriver).click(ele)
        .pause(200).keyDown(Keys.CONTROL).sendKeys("a").keyUp(Keys.CONTROL)
        .pause(200).sendKeys(Keys.BACK_SPACE)
        .pause(200).sendKeys("KOOKOK").perform();

[barancev]

In debugger, step by step, you can see that selenium clears the input, but later the application restores its value. The reason is simple: clear operation is not fair, it does not match any human user action. Selenium is cheating to clear an input, but this cheating does not work for sophisticated fields with intelligent event handlers. So you have to act like a human user, that is what Actions class is intended for.

[ckzgraphics]

In debugger, step by step, you can see that selenium clears the input, but later the application restores its value. The reason is simple: clear operation is not fair, it does not match any human user action. Selenium is cheating to clear an input, but this cheating does not work for sophisticated fields with intelligent event handlers. So you have to act like a human user, that is what Actions class is intended for.

I am using 'ele.clear();' not the Action class!! The same works properly on older Chrome browser. You think I should raise this in Chromium project?

[barancev]

That's exactly what I told, ele.clear() does not work. Or, it works (you can see it in debugger), it clears the field for some time, but later the application restores the original value. I suppose this command does not fire some event required for "persistent" cleaning. And it does not work in all browsers (I checked Firefox and IE).

Yes, it's a driver (e.g. chromedriver) issue, but may be it's a specification issue too (https://w3c.github.io/webdriver/#element-clear)

Try to raise an issue on chromedriver tracker, let them see if it is an implementation or a specification issue.

[ckzgraphics]

The behaviour was logged on Chromium(Chromedriver)[2702]

[yboi]

barancev можеш дать линк на автомейш чат? раньше юзал, но потерял

[mushtaqsayyed]

Using the following workaround resolved the behaviour-

driver.findElement(By.name("username")).sendKeys(Keys.chord(Keys.CONTROL,"a", Keys.DELETE));

[barancev]

@yboi
https://join.skype.com/nKjAhLUdpWRl
https://t.me/qa_automation
https://software-testers.herokuapp.com/, #automation channel

[sjethvani]

I am having angular input tag , which wasn't getting cleared using driver.findElement().clear() in chrome V71 (chrome driver 2.45) . I used below code , which worked for me

WebElement ele = webDriver.findElement(By.xpath(".//input[@name='username']")); 
new Actions(webDriver).click(element).sendKeys(Keys.END).keyDown(Keys.SHIFT).sendKeys(Keys.HOME).keyUp(Keys.SHIFT).sendKeys(Keys.BACK_SPACE).sendKeys("").perform()

[aleksandr-kotlyar]

Hello friends!
I want to share with you my solution for history, even if the issue is closed.
Alexei's @barancev variant didn't work for my current project react app and password input field.

      WebElement ele = webDriver.findElement(By.xpath(".//input[@name='username']"));
      new Actions(webDriver).click(ele)
        .pause(200).keyDown(Keys.CONTROL).sendKeys("a").keyUp(Keys.CONTROL)
        .pause(200).sendKeys(Keys.BACK_SPACE)

And yesterday i have created my own solution, which works:

while field_password().get_attribute('value') != '':
    field_password().send_keys(Keys.BACKSPACE)

and another variant, still works:

while len(field_password().get_attribute('value')) != 0:
    field_password().send_keys(Keys.BACKSPACE)

where field_password() is a WebElement, or to be fair SeleneElement, from selene library:

def field_password() -> SeleneElement:
    return s('input[name="password"]')

But for pure selenium my solution should also work.

I hope it would help someone someday.

Best regards,
Aleksandr.