带有太鼓的 Gaugejs 对数据表有意外行为

Question

看起来 foreach table 行中的元素交互未按预期工作，未找到元素且写入方法未写入

关于创建以下步骤

* Create following task
  | fiels | value          |
  |-------|----------------|
  | name  | test task name |
  | type  | urgent         |

并解析 table

step("Create following task <table>", async (table) => {
  await click($('.add-task'));
  table.rows.forEach( async row => {
    switch(row.cells[0]) {
      case 'name':
        await write(row.cells[1], into(inputField({placeholder:"Type here"}, toRightOf('Name of the task'))));
      case 'type':
        await click($('.input-text', toRightOf('Type of task')));
       await write(row.cells[1]);
   }
  click('Create');
});

write 方法并没有什么都不写，即使我放置了 waitfor 或 waitforstart，但如果我运行它们在循环外的单独步骤中，它们就会工作，

Answer 1

@nonyck 感谢您报告问题。

这是一个解决方法。使用 for 循环而不是 foreach 如下所示

HTML

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  First name:  <input type="text" name="firstname" placeholder="first">
  <br>
  Last name:  <input type="text" name="lastname" placeholder="last">
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

* Create following task
  | fiels  | value          |toRightOf  |
  |--------|----------------|-----------|
  | first  | test task name |First name:|
  | last   | urgent         |Last name: |

step("Create following task <table>", async function(table) {
    for(var i=0;i<table.rows.length;i++)
    {
        console.log(table.rows[i].cells[0])
        console.log(table.rows[i].cells[1])
        console.log(table.rows[i].cells[2])
        await write(table.rows[i].cells[1], into(textBox({placeholder:table.rows[i].cells[0]}, toRightOf(table.rows[i].cells[2]))));
    }

可以在 https://github.com/getgauge/taiko/issues/646 跟踪 foreach 的问题。请随时添加更多 details/thoughts.

这里有一些观察结果

您正在使用 await write(row.cells[1], into(inputField({placeholder:"Type here"}, toRightOf('Name of the task'))));

使用占位符 "Type here" 和 toRightOf(<hard coded value>)，您将一遍又一遍地 select 使用相同的元素。因为仅仅因为一个值被添加到文本字段，占位符不会变得无效。

$ 是 select 元素的后备选项。您可以使用 click(<wordings visible on screen>)。 Taiko 将负责为您寻找元素。

PS：如果能把你正在用的HTML分享给大家，一定能更好的帮助到你！

Answer 2

这里的问题不在于 gauge 或 gauge-js 或 taiko。节点的 forEach 不处理 async 回调。所以回调中的任何 await 都不会被考虑，并且循环将在没有完成第一个任务的情况下转到下一个元素。以下线程解释了此行为并讨论了一些巧妙的解决方法。

带有太鼓的 Gaugejs 对数据表有意外行为

Gaugejs with taiko have unexpected behaviour with data tables

javascript

puppeteer