Protractor .sendKeys() and browser.executeScript(“arguments[0].textContent= arguments[1];”, cell, value) do not work on non-input field

0
votes

I am writing automated tests with Protractor and Jasmine in TypeScript, but I cannot modify conentents of non-input fields of a table.

I have already tried using Protractor .sendKeys() and browser.executeScript("arguments[0].textContent= arguments[2];", cell, value).

Protractor .sendKeys() fails to modify it as I wish, instead it creates "0" value in the cell.

browser.executeScript("arguments[0].textContent= arguments[2];", cell, value) does change the value in the cell, at least visually. However, once I try saving the changes with pressing "Save" button on the page, the change get discarded and the value of the cell return to default.

I also tried it without .click() and .sendKeys(). Does not work.

My code:

    const index = await this.components.indexOf(componentName);
    const cell = await element(by.css('[row-index="'+index+'"] [col-id="value"]'));
    await cell.click();
    await cell.sendKeys(value);
    await browser.executeScript("arguments[0].textContent= arguments[1];", cell, value);

the DOM with the cell in question the DOM with the cell in question

The table itself The table itself I expect the values to be modified and preserved after I modify them in the table and press "Save" button

2
protractor
Can you show the attribute in the html that contains the value in the cell? - DublinDev
the snapshot corrected accordingly - Ostap Didenko
what happens when you click the cell? is the DOM changed and any input shown? maybe you need to point to that field - JavierFromMadrid
after I click the cell, the nested span tag appears with empty text in it, if I don't type in any text, and click another cell, the span tag disappears. - Ostap Didenko
Is the expected behavior for an actual user that they click the field, it becomes focused and then they can type into it? - DublinDev

2 Answers

1
votes

Updated Answer:

Based on how you describe the user interaction in the comment I believe that sending the keystrokes to the browser should work for you in this instance.

const index = await this.components.indexOf(componentName);
const cell = await element(by.css('[row-index="'+index+'"] [col-id="value"]'));
const spanThatContainsValue = cell.element(by.tagName('span'));

//Click on the cell in order to set the focus on field
await cell.click();

//Send the keystrokes to the focused field
await browser.actions().sendKeys(value).perform();

//use delay while testing so you can manually check if entered in field
await browser.driver.sleep(10*1000);

Any issues let me know

0
votes

In the end the following solution worked for me:

    const index = await this.components.indexOf(componentName);
    const cell = await element(by.css('[row-index="'+index+'"] [col-id="value"]'));
    await cell.click();
    await browser.switchTo().activeElement().sendKeys(value);
    await cell.sendKeys(Key.ENTER);