Target Locator does not support accessibilityID in mobile for webdriverio integration

[LayMui]

accessibilityLabel is used for both ios and android to set unique locator strategy

however serenityJS does not seem to support this
in my example code
I use
by.css
export class SearchPage {
static inputSearch = Target.the("search bar").located(by.css('~search-bar'));

it does not work

https://github.com/LayMui/foodie for the automation code
https://github.com/LayMui/food for the app

[jan-molak]

Hey @LayMui!

I haven't worked with React Native, so am not sure why the accessibility idea wouldn't be working...

But let's walk through it, maybe we'll figure it out together:

• Serenity/JS by.css selector for WebdriverIO is a simple pass-through to $(selector), so by.css('~search-bar') is an equivalent of calling $('~search-bar')
• WebdriverIO ~ is a shortcut for finding elements by their accessibility ID, so that should work too
• in your app, you seem to be setting the accessibility (search_bar) correctly using this helper function

BUT

If you look at the React Native docs for accessibilityLabel, you'll notice that the accessible property is set to true:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

While the helper function does not seem to set it:

   export function testProperties(id, disableAccessible = false) {
    const disableAccessibility = disableAccessible ? { accessible: false } : {};
  
    return { ...disableAccessibility, accessibilityLabel: id };
  }

Have you tried setting it to true?

   export function testProperties(id, disableAccessible = false) {
    const disableAccessibility = disableAccessible
      ? { accessible: false }
      : { accessible: true };
  
    return { ...disableAccessibility, accessibilityLabel: id };
  }

[LayMui]

I got a step definition issue now
at Step "he wants to search for restaurant name Dolce" is not defined. You can ignore this error by setting cucumberOpts.ignoreUndefinedDefinitions as true. [iPhone 11 iOS 14.5 #0-0] Step "he wants to search for restaurant name Dolce" is not defined. You can ignore this error by setting cucumberOpts.ignoreUndefinedDefinitions as true.

see line 19 https://github.com/LayMui/foodie/blob/master/src/step-definitions/SearchForRestaurant.steps.ts

Did I miss something here?

[jan-molak]

Check out the docs on Cucumber expressions, particularly parameter types:

Parameter Type	Description
{int}	Matches integers, for example 71 or -19.
{float}	Matches floats, for example 3.6, .8 or -9.2.
{word}	Matches words without whitespace, for example banana (but not banana split).
{string}	Matches single-quoted or double-quoted strings, for example "banana split" or 'banana split' (but not banana split). Only the text between the quotes will be extracted. The quotes themselves are discarded. Empty pairs of quotes are valid and will be matched and passed to step code as empty strings.
{} anonymous	Matches anything (/.*/).

The pattern you've defined:

'{pronoun} wants to search for restaurant name {string}'

requires the restaurant name to be surrounded by single or double quotes.

[LayMui]

I have fixed that.
now I got another issue

ConfigurationError: Jan can't BrowseTheWeb yet. Did you give them the ability to do so? [iPhone 11 iOS 14.5 #0-0]

I have pushed the changes to
https://github.com/LayMui/foodie/

[LayMui]

I have to add this code to the Given step

Given('{actor} is at the food app', async (actor: Actor) => {
    actor.whoCan(
        BrowseTheWeb.using(browser))
});````

however, this ability is already defined in the Actors.ts file at ./src

even I after added the above code
I am still unable to find the accessibilityID with the screenplay Target method

I got this error seen
Error: Can't call addValue on element with selector "~search-bar" because element wasn't found


I don't think it's the food app testProperties issue becos this works for using the webdriverio without the serenityJS screenplay 

I also verify using the accessibility inspector the locator strategy for accessibilityID/Label is there for that element

the changes are at https://github.com/LayMui/foodie

[LayMui]

@jan-molak I was looking at this
https://github.com/serenity-js/serenity-js/blob/master/packages/webdriverio/src/screenplay/questions/locators.ts

it need to support the mobile accessibilityLabel:
https://webdriver.io/docs/selectors#accessibility-id

do you think there is need to add to the locator for accessibilityID (for mobile)?

[jan-molak]

Hey @LayMui - I'd need to debug it with your app, it's hard to tell at this stage I'm afraid.

[LayMui]

@jan-molak you may clone the repo
https://github.com/LayMui/foodie
the app repo is at
https://github.com/LayMui/food