Confusing documentation regarding data-attribute selector

[mattmcmanus]

I would of proposed changes for the readme but I'm not sure of the answer just yet. Your documentation has several examples of selectors using standard sizzle style queries. Eg:

export default class SignupPage extends PageObject {
  fillInEmail(text) {
    return this.fillIn('#email', text);
  }
}

But, at far as I can tell, you only ship a data-attribute bridge, meaning that everything you want to select requires the data-test-selector attribute. Am I correct in this? Is there a regular bridge or is that something I need to write and pass into the constructor?

[linstula]

@mattmcmanus, yes you're correct. Apologies for the inconsistent documentation. I'm in the process of refactoring away from utilizing bridges and having the Page Objects target data attributes be an opt-in rather than by default (hence the way the documentation is written).

Currently, there is only the data-attribute bridge. I'm hesitant to add another bridge though, as I think the bridges over-complicate the addon and intend on removing them.

In the meantime, if you want to use the addon and not target data attributes, you can create another bridge. Though, I would create a BasePageObject and have that specify the bridge rather than pass in the bridge each time you create a new instance:

import PageObject from 'ember-page-object';
import CustomBridge from './bridges/custom';

export default class BasePageObject extends PageObject {
  constructor(options = {}) {
    options.bridge = new CustomBridge();
    super(options);
  }

[mattmcmanus]

Thanks for clarifying. That makes sense. Any idea when the code will be updated to reflect the docs?

I ended up making a small initializer so I could add data attributes to inputs and links and things have been going smoothly.

[linstula]

Hope to have it done today :)

[linstula]

@mattmcmanus this should be all set as of this PR: https://github.com/linstula/ember-page-object/pull/24.

I've also published a new version (1.0.0) that not longer contains DOM bridges and requires you to opt in to using data attributes.

To continue using data attributes, you can overwrite the toSelector function in your base page object. toSelelector selector is a hook that allows you to transform the selector that gets passed into the various helper functions: https://github.com/linstula/ember-page-object#data-attributes

Thanks for the feedback on the docs! Let me know if you run into any more issues :)