Protractor - click within For Each not behaving as expected

Question

In Following Protractor Code

const tabs = await element.all(by.id('tab'));
tabs.forEach(async tab => {
  tab.click().then(function() {
  element.all(by.id('radio1')).click();
});
}); 
 await element(by.id('saveAndContinue')).click();

radio1 is only clicked in last tab because of which last line of saveAndContinue is hidden and thus click() of it fails

While Sleep does work outside of FOR loop it doesn't when i want to allow time before radio1 click

EDIT 1: Problem is every line is executing BUT radio1 clicks for last Tab not previously clicked tab. Tab click is fast for radio1 to be clikced.

I think you'll find that `.forEach()` doesn't play nice with async/await. You may want to switch to using just a regular old `for` loop. That's been my experience anyhow. Could be part of your problem. — tehbeardedone, Aug 28 '19 at 16:48
i tried: const tabs = await element.all(by.name("tab")); for(let i=0; i — AbhishekS, Aug 28 '19 at 19:06

score 2 · Answer 1 · answered Aug 28 '19 at 17:26

Since you didn't attach HTML and a screenshot of your app, here is my shot in a dark... Try this and let me know if works

let tabs = element.all(by.id('tab'));
let radioButtons = element.all(by.id('radio1'));

let tabCount = await tabs.count();
for (let i = 0; i < tabCount; i++) {
  await tabs.get(i).click();
  let radioCount = await radioButtons.count();
  for (let j = 0; j < radioCount; j++) {
    await radioButtons.get(j).click();
  }
}
await element(by.id('saveAndContinue')).click();

Thanks a ton man, after customized changes to your code it finally worked!! which i have added comment about separately — AbhishekS, Aug 29 '19 at 07:44

score 1 · Answer 2 · answered Aug 28 '19 at 15:47

1

A couple things to note, the "id" Attribute is required to be unique. You should not have multiple elements with the same id, this can cause some wacky behavior. check out this answer as a source Does ID have to be unique in the whole page?

Also, element.all() is going to return an array of elements, so you are trying to click an array of elements.

see the documentation for element.all() on protractor docs https://www.protractortest.org/#/api?view=ElementArrayFinder

Assuming the elements are being returned as an array, in spite of using duplicate html id's, you would need to click them individually like such

element.all(by.id('radio1')).then(function (myIds) {
myIds[0].click();
myIds[1].click();
});

Or of course loop thru them.

Best of luck

answered Aug 28 '19 at 15:47

L1R

215
2
9

thanx for response 1) yes ID is unique 2) problem is not if it gets array of elements OR just one, tab.Click() just moves to next while not clicking any radio1 in previous tabs – AbhishekS Aug 28 '19 at 16:11
If the ID=radio1 is unique, then your entire code does not make sense. That means on the entire page there is only one element with the id=radio1 , so just use element(by.id('radio1')).click() – L1R Aug 28 '19 at 16:17
I am sorry for previous incorrect comment answer. There are more than 1 radio with id=radio1 in different radio list categories. multip rows with radios, id=radio1, radio2, etc I have appended original question above with **Edit 1** – AbhishekS Aug 28 '19 at 19:43

yong · Answer 3 · 2019-08-29T13:07:57.817

1

1) missed await ahead tab.click()

2) element.all().click() shouldn't work

const tabs = await element.all(by.id('tab'));
tabs.forEach(async tab => {
  await tab.click();
  await element.all(by.id('radio1')).first().click();
  // I think you should not find all radio1 of entire page, 
  // it will find radio1 of other tabs which is not visible in the active tab.
  // and protractor will fail to click on invisible radio1
  // thus you should find raido1 which is belongs to active tab

}); 
await element(by.id('saveAndContinue')).click();

edited Aug 29 '19 at 13:07

answered Aug 29 '19 at 01:56

yong

13,357
1
16
27

1) i did try variation of code with AWAIT ahead of tab.click() but without success 2) element.all().click() is working for last tab, and when i sleep before final button and move to other prev tab, then all radio1 of that moved tab gets clicked? 3) variation which again doesnt work: const tabs = await element.all(by.id('tab')); tabs.forEach(async tab => { await tab.click().then(async function() { //browser.sleep(2000); const radios = await element.all(by.id('radio1')); radios.forEach(async rd => { rd.click();}); });}); – AbhishekS Aug 29 '19 at 07:19
yong, i resolved it as shown in: comment [here](https://stackoverflow.com/a/57705384/3627914) – AbhishekS Aug 29 '19 at 15:11

AbhishekS · Answer 4 · 2019-08-29T15:12:53.497

0

Thanks to Sergey Pleshakov above following works (after wee bit change):

async doGateway2bComplexHappyPath() {
let tabs = element.all(by.id('tab'));

let tabCount = await tabs.count();
for (let i = 0; i < tabCount; i++) {
  tabs.get(i).click();
  //browser.sleep(1000);
  element.all(by.id('radio1')).click();
  //browser.sleep(1000);
}

 //await browser.sleep(1000);
 await element(by.id('saveAndProceed')).click();
}

edited Aug 29 '19 at 15:12

answered Aug 29 '19 at 07:42

AbhishekS

71
8

1

Careful with this. Click() is a promise. `await` keyword needs to resolve that promise, if you don't use it it may get executed, but the right sequence of action is not guaranteed. If you start using 'await' continue doing so until the end. Another problem is `element.all...click()`. Think of it this way - you're saying there are multiple elements and you're executing 1 click... which element gets it? I personally don't know the answer, but try to be specific - for instance `element.all().first().click()` or `last()` or `get(number)` – Sergey Pleshakov Aug 29 '19 at 15:45
await fails for Click with error 'Failed: Element not interactable' removing await pass however Warn is ===>> UnhandledPromiseRejectionWarning: ElementNotVisibleError: element not interactable
(node:33548) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)(node:33548) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. – AbhishekS Aug 30 '19 at 06:54
Resolved my console errors as well with help of: https://stackoverflow.com/a/48899752/3627914 – AbhishekS Aug 30 '19 at 08:32

Protractor - click within For Each not behaving as expected

4 Answers4

Linked