featurist / browser-monkey

Reliable DOM testing
https://browsermonkey.org
53 stars 6 forks source link

Fuzzier finders #32

Closed joshski closed 8 years ago

joshski commented 8 years ago

Fuzzy finders browser.link(label) and browser.button(label).

Using these means being less coupled to the document structure, so superficial changes to markup break fewer tests.

I implemented them using xpath at first, then reimplemented with css and jquery. The code would be simpler using css :has pseudo-selector which is supported by jquery but otherwise not widely supported. What do you think?

joshski commented 8 years ago

@adiel you agree with this direction, right? :)

refractalize commented 8 years ago

Yeah I agree with this direction too, maybe with less xpath tho. Think we could convert the xpath into equiv jquery/javascript finders?

dereke commented 8 years ago

@joshski I think it is cool too :-) not sure about using xpath though.. surely there is a better way.

edit: ah tim thinking the same thing!

joshski commented 8 years ago

Heh, yeah fair enough. Maybe I should use the xpaths to build up a test suite, then reimplement the finders...

dereke commented 8 years ago

also I would like to see some shortcuts to this stuff, for instance:

component.typeIn([
  {for: 'First Name', text: 'Joe'},
  {for: 'Last Name', text: 'Bloggs'},
]);

rather than

component.field('First Name').typeIn('Joe').then(() => {
  return component.filed('Last Name').typeIn('Bloggs');
})
joshski commented 8 years ago

Yeah right... shouldn't that happen automagically?

dereke commented 8 years ago

you get fill syntax for free https://github.com/featurist/browser-monkey#fill but that relies on components to work.. which I believe you are not a fan of ;-)

dereke commented 8 years ago

maybe we can have two completely separate modes for browser monkey, so this less componenty way where we could keep the fill syntax:

component.fill([
  {typeIn: 'First Name', text: 'Joe'},
  {typeIn: 'Last Name', text: 'Bloggs'},
])

and use the target of the action to find the field in scope rather than using a finder on the component.. or we could first look for finders on the component and then search for fields if one does not exist. Does that make sense?

joshski commented 8 years ago

I was thinking there might be an automatic translation between single actions and batch actions, so:

browser.find('x').click().then(() => {
  return browser.find('y').click();
});

...is automatically translated to (roughly):

browser.click([
  { selector: 'x' },
  { selector: 'y' }
]);

I'm probably overthinking it ;)

dereke commented 8 years ago

well yeah we should support stuff like that for sure.. but maybe need to redesign the api (browser-monkey 2.0)

joshski commented 8 years ago

This branch doesn't do xpath any more.

adiel commented 8 years ago

I think get these finders works by as individual actions first before worrying about how to batch them together to avoid lots of .then()s

adiel commented 8 years ago

@joshski also from an outside in perspective I am more interested in:

browser.click
browser.fillin
browser.select

Than

browser.field
browser.link

Which you don't usually use unless you want to call click / fillIn on them.

browser.link().shouldExist() is conceivable as a test but clicking a link is what we usually do if we want to test it.

joshski commented 8 years ago

Cheers @adiel, you're right. I changed the tests to click links and buttons instead of just finding them.

Next step: browser.click("Label") => browser.linkOrButton("Label").click()

dereke commented 8 years ago

implemented here https://github.com/featurist/browser-monkey/commit/5198738554acef92255c00d94508ba5f33615b85