NativeAlert.js

/**
 * This is an example class for how the handle alerts with WebdriverIO.
 * You can use it in the following way (this is with Jasmine, but other frameworks can also be used)
 * 
 * @example
 *  import Screen from '../Screen';
 *  import NativeAlert from '../NativeAlert';
 *
 *  describe('Check buttons', () => {
 *    it('should be able to open the alert and close it with all 3 buttons', () => {
 *       Screen.activeButton.click();
 *       NativeAlert.waitForIsShown(true);
 *       expect(LoginScreen.alert.text()).toEqual('This button is\nThis button is active');
 *       NativeAlert.pressButton('Ask me later');
 *       NativeAlert.waitForIsShown(false);
 *       Screen.activeButton.click();
 *       NativeAlert.waitForIsShown(true);
 *       NativeAlert.pressButton('Cancel');
 *       NativeAlert.waitForIsShown(false);
 *       Screen.activeButton.click();
 *       NativeAlert.waitForIsShown(true);
 *       NativeAlert.pressButton('OK');
 *       NativeAlert.waitForIsShown(false);
 *   });
 *  });
 * 
 * Feel free to use it for all kinds of purposes, a star is much appreciated ;-)
 *
 * Grtz,
 * Wim | wswebreation
 */

const SELECTORS = {
    ANDROID: {
        ALERT_TITLE: '*//android.widget.TextView[@resource-id="android:id/alertTitle"]',
        ALERT_BUTTON: '*//android.widget.Button[@text="{BUTTON_TEXT}"]',
    },
    IOS:{
        ALERT: '*//XCUIElementTypeAlert',
    }
};

class NativeAlert {
    /**
     * Wait for the alert to exist
     */
    waitForIsShown(isShown = true) {
        browser.waitForExist(
            browser.isAndroid ? SELECTORS.ANDROID.ALERT_TITLE : SELECTORS.IOS.ALERT,
            11000,
            !isShown,
        )
    }

    /**
     * Press a button in a cross-platform way.
     *
     * IOS:
     *  iOS always has an accessibilityID so use the `~` in combination
     *  with the name of the button as shown on the screen
     * ANDROID:
     *  Use the text of the button, provide a string and it will automatically transform it to uppercase
     *  and click on the button
     *
     * @param {string} selector
     */
    pressButton(selector) {
        const buttonSelector = browser.isAndroid
            ? SELECTORS.ANDROID.ALERT_BUTTON.replace(/{BUTTON_TEXT}/, selector.toUpperCase())
            : `~${selector}`;
        browser.click(buttonSelector);
    }

    /**
     * Get the alert text
     *
     * @return {string}
     */
    text() {
        return browser.alertText();
    }
}

export default new NativeAlert();