The behavior of JavaScript execution when typing in a text field does not align with the expected sendKeys method

Question

The behavior of JavaScript execution when typing in a text field does not align with the expected sendKeys method

Whenever I run my tests on a Linux machine, I encounter an issue with the way text is typed using the following code snippet:

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

Instead of typing the text correctly as expected, various permutations like "on linux machine I am running", "running on linux machine I am" etc appear in the UI.

To address this issue, I resorted to using JavaScript:

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

While this successfully types the text in the field, it disables the Save button which should actually be enabled. Interestingly, when I use sendKeys, the button is enabled.

I am seeking assistance in understanding why the JavaScript approach behaves differently and how to rectify it to ensure both functionalities work seamlessly without relying on hitting tab to enable the button, as that is not a viable solution for my scenario.

javascript java selenium selenium-webdriver selenium-chromedriver

Answer 1

Answer №1

When you set arguments[0].value = "...", the value in the text field changes but no events are triggered on that element. The "Save" button is probably waiting for a change event to happen within the <form>. You will have to manually trigger a change event on the text box using JavaScript. For more information, refer to How can I trigger an onchange event manually?.

The way you describe the situation suggests that JavaScript may already be listening for the change event and rearranging the words in a Yoda-like manner. Manually triggering the change event could activate the "Save" button, potentially resulting in the same outcome as using sendKeys. In such cases, it might be necessary to also enable the "Save" button using JavaScript:

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

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

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

saveButton.click();

Answer 2

When you set arguments[0].value = "...", the value in the text field changes but no events are triggered on that element. The "Save" button is probably waiting for a change event to happen within the <form>. You will have to manually trigger a change event on the text box using JavaScript. For more information, refer to How can I trigger an onchange event manually?.

The way you describe the situation suggests that JavaScript may already be listening for the change event and rearranging the words in a Yoda-like manner. Manually triggering the change event could activate the "Save" button, potentially resulting in the same outcome as using sendKeys. In such cases, it might be necessary to also enable the "Save" button using JavaScript:

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

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

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

saveButton.click();

Answer 3

Answer №2

Just because an element is initially visible doesn't necessarily mean it's also interactable, meaning it may not be clickable or ready to receive sendKeys().

In order to use sendKeys() on a specific element, you must wait for the element to become clickable using WebDriverWait along with the elementToBeClickable() method. You can follow this recommended Locator Strategy:

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

If you're interested in a more in-depth discussion, check out How to preserve the character sequence sent through SendKeys() method through Selenium and C#

tl; dr

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

Answer 4

Just because an element is initially visible doesn't necessarily mean it's also interactable, meaning it may not be clickable or ready to receive sendKeys().

In order to use sendKeys() on a specific element, you must wait for the element to become clickable using WebDriverWait along with the elementToBeClickable() method. You can follow this recommended Locator Strategy:

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

If you're interested in a more in-depth discussion, check out How to preserve the character sequence sent through SendKeys() method through Selenium and C#

tl; dr

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

Answer 5

Answer №3

Experiment with writing in either a promise style or async/await style.

async eraseContent(element) {
    // Using elem.clear() may not always work due to potential background JS interference
    await element.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a'));
    await element.sendKeys(protractor.Key.DELETE);
    // Waiting for Application Load can be done here
}

reverseText = str => str.split('').reverse().join();
// intersperse function inserts an item between each element of an array
// ex: intersperse('k')("abc") => ['a', 'k', 'b', 'k', 'c']
intersperse = char => string => string.split('').reduce((acc, char) => [...acc, c, char], []).slice(0, -1);

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

    await eraseContent(visibleElement);
    const reversedStr = reverseText('I am running on linux machine');
    const sequence = intersperse(protractor.Key.HOME)(reversedStr);
    // e, HOME, n, HOME, i, HOME, h, HOME, ...
    await visibleElement.sendKeys(protractor.Key.chord(...sequence));
})();

Answer 6

Experiment with writing in either a promise style or async/await style.

async eraseContent(element) {
    // Using elem.clear() may not always work due to potential background JS interference
    await element.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a'));
    await element.sendKeys(protractor.Key.DELETE);
    // Waiting for Application Load can be done here
}

reverseText = str => str.split('').reverse().join();
// intersperse function inserts an item between each element of an array
// ex: intersperse('k')("abc") => ['a', 'k', 'b', 'k', 'c']
intersperse = char => string => string.split('').reduce((acc, char) => [...acc, c, char], []).slice(0, -1);

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

    await eraseContent(visibleElement);
    const reversedStr = reverseText('I am running on linux machine');
    const sequence = intersperse(protractor.Key.HOME)(reversedStr);
    // e, HOME, n, HOME, i, HOME, h, HOME, ...
    await visibleElement.sendKeys(protractor.Key.chord(...sequence));
})();

The behavior of JavaScript execution when typing in a text field does not align with the expected sendKeys method

Answer №1

Answer №2

tl; dr

Answer №3

Similar questions

Ways to quickly terminate a pipeline in a JavaScript transformation

Changing date and time into milliseconds within AngularJS

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?

ES6 syntax makes use of variables enclosed in curly braces

Navigating the data returned by an AJAX call can be quite perplexing

python use selenium to select each checkbox individually instead of selecting all at once

Testing VueX getters that rely on other getters in unit tests

Issue: Request from a different origin blocked

What are the steps for implementing timezone-js?

The mongoose library requires JSON input, yet it is unable to generate a dynamic JSON object from a Node

What is the best way to retrieve all arrays within a JSON object?

Why is Selenium Webdriver unable to click on an element in Chrome, even though the same code works perfectly in Firefox?

Forward from the Ajax PHP script

Testing for an exception using JUnit's assertTrue method

Ways to retrieve the global state from within the mutation namespace module

Sending file streams from the frontend to the backend service using Express.js and the Fetch

Sending information from React JS to MongoDB

Utilize VueJS to streamline your filtering process

Activate inline javascript within LESS styling

Retrieving the Body of a Network Request Response in Python