po ideas

usage.md

Async

We could supply page objects with async is(.*) properties. We need to choose a good prefix for waiting:

// today
await waitUntil(() => loginPage.isVisible);

// vs proposed
await loginPage.untilIsVisible

Possible prefix:

• once
• untilIs

Note: we can even support it for old school tests with a help of native-dom-helpers.

Better chainability

Each action execution returns root context. Allows to reduce repetitions.

Today syntax:

await page.login.fillIn('username')
await page.password.fillIn('password')
await page.rememberMe.click()
await page.submit();

Proposed:

// minus 3 `await` and `page` repetitions 
await page
  .login.fillIn('username')
  .password.fillIn('password')
  .rememberMe.click()
  .submit();

However sometimes we have to restore the whole path from the root. This way we only save awaits typing.

await loginPage
  .messages[0].untilIsVisible
  .messages[0].contains('Success')

multi property fillIn

await component.fillIn({
  ...data, // Object. `fillIn` each key-value pair
  extraField: 'lorem ipsum...',
  rememberMe: true // clicks checkbox or radio-button?
});

read

Reads text property for each key

const form = create({
  someInput: '[data-test-some-input]',
  someDropdown: '[data-test-some-dropdown]',
  rememberMe: [type=checkbox]
});

const data = await form.read();

assert.deepEquals(data, {
  someInput: 'entered text',
  someDropdown: '13', // selected dropdown value
  rememberMe: true
})