Javascript execution for typing in text field is not behaving as sendKeys

Question

I'm running my tests on Linux machine and there with following code, it does not type text correctly -

visibleElement.clear();
visibleElement.sendKeys("I am running on linux machine");

In UI, actually different text gets typed in like - "on linux machine I am running", "running on linux machine I am" etc

hence to handle this, I used javascript like -

JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].value='I am running on linux machine';", visibleElement);

This types text as it is in text field, but after typing this, there is Save button which is expected to be enabled but that is not enabled.

But that button is enabled if sendKeys is used.

Could you please let me know why this javascript is behaving differently and provide correct javascript?

How both things will work in single solution(without hitting tab to enable button because that is not correct way in my situation)?

Yes, I've tried that for `Save` button and visually I can see that button is never enabled. — Alpha, Jan 22 '20 at 11:41
No I am talking about input field Have you tried explicit wait and `elementToBeClickable`? and then try for `sendKeys()` — KunduK, Jan 22 '20 at 11:42
The application I'm testing is private, cannot be accessed publicly. — Alpha, Jan 22 '20 at 12:50
You have this tagged with "javascript" but the selenium code appears to be Java. — Greg Burghardt, Jan 22 '20 at 13:42
@GregBurghardt, you're right, Selenium code is in Java but it has used javascript to perform typing text. In case if there is any better solution from javascript guys, I tagged it. — Alpha, Jan 22 '20 at 13:48

Pawan Kumar · Answer 1 · 2020-01-23T06:08:54.270

Try to write in a promise style or async/await style.

async clear_elem(elem) {
    // elem.clear(), MAY not work always because of some background JS
    await elem.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a'));
    await elem.sendKeys(protractor.Key.DELETE);
    // Can await here for Application Load
}

reverse_string = as => as.split('').reverse().join();
// intersperse - Places an Item in between elements of an array
// ex: intersperse('k')("abc") => ['a', 'k', 'b', 'k', 'c']
intersperse = x => as => as.split('').reduce((acc, x) => [...acc, a, x], []).slice(0, -1);

(async () => {
    // Assuming you have element - visibleElement
    await browser.wait(protractor.ExpectedConditions.elementToBeClickable(visibleElement), default_timeout);

    await clear_elem(visibleElement);
    const str = reverse_string('I  am running on linux machine');
    const sequence_of_characters = intersperse(protractor.Key.HOME)(str);
    // e, HOME, n, HOME, i, HOME, h, HOME, ...
    await visibleElement.sendKeys(protractor.Key.chord(...sequence_of_characters));
})();

I have edited it to click Home button for every character enter. — Pawan Kumar, Jan 22 '20 at 12:59

score 0 · Answer 2 · answered Jan 22 '20 at 13:50

Setting arguments[0].value = "..." sets the value on the text field, but no events are triggered on that element. The "Save" button is likely waiting for a change event to occur somewhere inside the <form>. You will need to manually trigger a change event on the text box using JavaScript. See How can I trigger an onchange event manually?.

The behavior you describe makes me think JavaScript is already listening for the change event, and then scrambling the order of the words as though Yoda has typed them. (or typed them Yoda has?) Triggering the change event manually might enable the "Save" button, and you still might end up with the same text that using sendKeys would result in. If this is the case, you might want to enable the "Save" button with JavaScript as well:

// Set the input text
jse.executeScript("arguments[0].value='I am running on linux machine';", visibleElement);

// Find the "Save" button
WebElement saveButton = driver.findElement(...);

// Enable the save button
jse.executeScript("arguments[0].disabled = false;", saveButton);

saveButton.click();

score 0 · Answer 3 · answered Jan 22 '20 at 16:05

To start with element being visible doesn't guarantees that the element is interactable as well i.e clickable or you can straight way invoke sendKeys().

To invoke sendKeys() within the desired element you need to induce WebDriverWait for the elementToBeClickable() and you can use the following Locator Strategy:

WebElement clickableElement = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(visibleElement))
clickableElement.click();
clickableElement.clear();
clickableElement.sendKeys("I am running on linux machine");

You can find a relevant detailed discussion in How to preserve the character sequence sent through SendKeys() method through Selenium and C#

tl; dr

Selenium: How selenium identifies elements visible or not? Is is possible that it is loaded in DOM but not rendered on UI?

Javascript execution for typing in text field is not behaving as sendKeys

3 Answers3

tl; dr