Protractor .sendKeys() 和 browser.executeScript("arguments[0].textContent= arguments[1];", cell, value) 不适用于非输入字段答案

【问题标题】：Protractor .sendKeys() and browser.executeScript("arguments[0].textContent= arguments[1];", cell, value) do not work on non-input fieldProtractor .sendKeys() 和 browser.executeScript("arguments[0].textContent= arguments[1];", cell, value) 不适用于非输入字段
【发布时间】：2019-07-05 04:36:43
【问题描述】：

我正在 TypeScript 中使用 Protractor 和 Jasmine 编写自动化测试，但我无法修改表格的非输入字段的内容。

我已经尝试过使用 Protractor .sendKeys() 和 browser.executeScript("arguments[0].textContent= arguments[2];", cell, value)。

Protractor .sendKeys() 未能如我所愿修改它，而是在单元格中创建“0”值。

browser.executeScript("arguments[0].textContent= arguments[2];", cell, value) 确实改变了单元格中的值，至少在视觉上是这样。但是，一旦我尝试按页面上的“保存”按钮保存更改，更改就会被丢弃，单元格的值会恢复为默认值。

我也尝试过不使用 .click() 和 .sendKeys()。不工作。

我的代码：

    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);

有问题的单元格的 DOM

桌子本身我希望在我在表格中修改它们并按“保存”按钮后修改和保留这些值

【问题讨论】：

你能在html中显示包含单元格值的属性吗？
快照相应更正
单击单元格时会发生什么？ DOM 是否已更改并显示任何输入？也许您需要指向该字段
单击单元格后，嵌套的span标签出现，其中包含空文本，如果我不输入任何文本，然后单击另一个单元格，span标签就会消失。
实际用户点击该字段后的预期行为是否成为焦点，然后他们可以输入？

标签： protractor

【解决方案1】：

更新答案：

根据您在评论中描述用户交互的方式，我认为在这种情况下将击键发送到浏览器应该适合您。

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);

有什么问题告诉我

【讨论】：

嗨，它在单元格元素中找不到 span 子标签。跨度仅在我单击单元格后出现。但是，这种方式也表示它无法找到 span 元素：await cell.click();常量 spanThatContainsValue = cell.element(by.tagName('span')); ...
我已经更新了答案，可以测试发送击键的方法并让我知道是否还有问题？
@DublinDev 我认为您需要先单击单元格，然后选择单击后出现的跨度
@JavierFromMadrid 可能是的，但我认为这种方法也应该有效，因为这本质上是真实用户与该领域交互的方式。当海报尝试它时，我们应该知道更多
谢谢，但我同时找到了解决方案。常量 spanThatContainsValue = cell.element(by.tagName('span')); - 此行会导致错误，可能仅在单击单元格后才将 span 元素添加到 dom。动作链也没有帮助

【解决方案2】：

最后，以下解决方案对我有用：

    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);

【讨论】：