introduce intention revealing UI element specific helper functions

[cer]

The page object functions are written in terms of low level functions.

It would be better to introduce some helper functions.

This is a repeated pattern:

    await waitClickAndType(page, SEL.FORM_FIELD_ADDRESS, testData.address);
    await waitForTimeout(page, 10);

could be replaced by

    textField(page, SEL.FORM_FIELD_ADDRESS).enter(testData.address)

• Removes duplication
• Makes it clear what is happening

[cer]

Actually, I realized that when writing #21 (comment) that this can be improved further:

Instead of

    await   textField(page, SEL.FORM_FIELD_ADDRESS).enter(testData.address);

it could be better to have

   await addressField(page).enter(testData.address);

where addressField() is written in terms of textField()

[cer]

So in other words there is a hierarchy:

• Test
• Page Object, e.g. landingPage
• Page component, e.g. addressField
• UI element, textField()

[dartandrevinsky]

This next-to-last-step of hierarchy (Page component, e.g. addressField) seems a nice thing to have but once it comes to implementation it starts backfiring. Namely, the desired pattern to be so:

await addressField(page).enter(testData.address);

but it is not clear at all what this part should do:

addressField(page)

? Accumulate the arguments? always require a second method, like enter(data) : Promise<*>? What if we need only to locate (ensure presence) an input?

But the point is that awaiting each link in a chained call looks very cumbersome and it is so easy to introduce a mistake.

Actually, the puppeteer's API already has nearly identical methods and they have all be await-ed, as the queue is called. Like so:

await (await addressField(page)).enter(testData.address);

I'll have to think over it before implementing it.

Maybe something like this?

await forAddressField(page, [
  f => f.enter(text) // is awaited from the implementation
]);

Thoughts?

[cer]

await (await addressField(page)).enter(testData.address);

Yes. This is ugly

but it is not clear at all what this part should do:

addressField(page)

? Accumulate the arguments? always require a second method, like enter(data) : Promise<*>?

Sounds like addressField(page) would need to return an object that has an enter() method, which returns a Promise.

What if we need only to locate (ensure presence) an input?

Sounds like in addition to enter() the object would have another method for verifying existence, which returns a future.