arnnis / react-native-toast-notifications

Toast component for React Native, supports Android, iOS and Web
563 stars 89 forks source link

is accessibilityLabel supported(e2e test with appium) #130

Open uniquejava opened 2 years ago

uniquejava commented 2 years ago

Hello, dear component author,

We are testing our app with appium, we can set a accessiblityLabel for any element and use it in our test script. However, I found that even if I set it for this custom toast component, it's not able to be located.

Any idea? I'd just like to verify the toast message in my test script.

image

Test script:

  it('should display error message given wrong credentials', async () => {
    await $('~username').setValue('hello');
    await $('~password').setValue('world');
    await $('~btnLogin').click();

    // https://stackoverflow.com/questions/30458931/how-to-test-android-toast-messages-in-appium-selenium-java
    // const message = await $('//android.widget.Toast[1]').getText();
    const message = await $('~toastMessage').getText();
    expect(message).toBe('Wrong ID or Password');
  });

Component code:

 <ToastProvider
        duration={600000}
        renderType={{
          custom_type: toast => (
            <View
              accessibilityLabel="toastView"
              style={{
                backgroundColor: 'rgba(255,27,31,0.60)',
               ...
                top: 334,
              }}>
              <Text
                accessibilityLabel="toastMessage"
                style={{ fontSize: 20, color: '#ffffff' }}>{`${toast.message}`}</Text>
            </View>
          ),
uniquejava commented 2 years ago

Update: I managed to identify the text on toast message with appium OCR plugin, but it's a little overkill

   // only if we can find the toast element by its accessibilityLabel like we do for username and password

    // const message = await $('~toastMessage').getText();
    // expect(message).toBe('Wrong ID or Password');

    // workaround: use ocr to take a screenshot and recognize the text
    await driver.ocrWaitForTextDisplayed('Wrong ID or Password', {
      androidRectangles: {
        top: 1012,
        left: 259,
        right: 834,
        bottom: 1164,
      },
      timeout: 5000,
    });
arnnis commented 2 years ago

Can you create a PR for this issue?

uniquejava commented 2 years ago

Can you create a PR for this issue?

Hello, thank you for your response, later I found that it's a general appium issue for absolutely positioned views, not a issue from your plugin.

I got it from here: https://petrlz63.medium.com/appium-tips-for-react-native-apps-d869d68921db

Avoid position=”absolute” for container's views

There is a problem that appium doesn’t see elements inside absolutely positioned views. So you can’t interact with. [Learn more](http://www.wswebcreation.nl/clicking-on-an-element-with-appium-that-cant-be-found-in-the-ui-tree/).

Also using ocr is not that bad for our app, so feel free to close this issue.