1

Looks like element interactions inside foreach table row is not working as expected, elements are not found and write method is not writting

On create the following step

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

and parsing the 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');
});

The write methods are not writting nothing, even if I put waitfor or waitforstart, but they work if I run them in separate steps outside the loop,

nonyck
  • 69
  • 1
  • 13

2 Answers2

0

@nonyck Thank you for reporting the issue.

Here is a work around. Use for loop instead of foreach as shown below

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

The issue with foreach can be tracked at https://github.com/getgauge/taiko/issues/646. Please feel free to add more details/thoughts.

Here are a couple of observations

  • You are using await write(row.cells[1], into(inputField({placeholder:"Type here"}, toRightOf('Name of the task'))));

With placeholder "Type here" and toRightOf(<hard coded value>), you will be selecting the same element over and over again. 'Cause just because a value is added to the text field, the placeholder doesn't become invalid.

  • $ is a fallback option to select elements. You can use click(<wordings visible on screen>). Taiko will take care of finding the element for you.

PS: If you can share the HTML you are using with this, will be able to help you better!

Soumya Swaroop
  • 351
  • 2
  • 3
  • this code `await write(row.cells[1], into(inputField({placeholder:"Type here"}, toRightOf('Name of the task'))));` is working when I run It directly on taiko console or in a single step, the problem is inside the loop – nonyck Jun 23 '19 at 09:20
0

The issue here is not with gauge or gauge-js or taiko. The node's forEach does not handle the async callbacks. So any await inside the callback will not be considered, and the loop will go to the next element without completing the first task. The following thread explains this behavior and talks about some neat workarounds as well.

Using async/await with a forEach loop

bugdiver
  • 26
  • 2