How to access custom element with hypen in name using Ruby Page-Object Gem

Question

I have some angular elements and I want to map them. Trying to do it like so

element('ng-select', id: 'id1')

Getting an error about Watir

NameError: undefined local variable or method 'ng' for #<Watir::HTMLElement:0x04defcc8>

That's right. Error says 'ng', NOT 'ng-select'. What gives? How can I specify that the ng-select tag? I know I can replace ng-select with element but that seems too generic for me. The page-object gem already doesn't have native support for angular tags so I'd like to be descriptive.

Answer 1

The first argument in #element is used as the method name for a locating an element in Watir. For example:

element('element', id: 'id1') #=> translates to browser.element(id: 'id1')
element('div', id: 'id1') #=> translates to browser.div(id: 'id1')

With 'ng-select', it is blindly applied resulting in running the following. There is an exception since #ng does not exist.

browser.ng - select(id: 'id1')

Technically, the first argument is the corresponding Watir method, not just a tag name. If you want a custom tag name, pass it as part of the locator:

element(:element, tag_name: 'ng-select', id: 'id1')