wdio-enverus-core-ui-elements v1.0.5

Enverus Core UI ELEMENT utils

About

The motivation with this module is to provide a high-level abstraction for Core UI Element utils.

Getting Started

Install Enverus Core UI Element Utils as an npm module and save it to your package.json file as a development dependency:

npm install wdio-enverus-core-ui-elements --save-dev

Once installed it can now be referenced by simply calling

import {
    CoreCheckBox,
    CoreSpinner,
    CoreInputField,
    CoreSlider
} from 'wdio-enverus-core-ui-elements';

Available methods:

Check Box:

• setCheckBoxTo - Set checkbox to {boolean} stateFilter (true - checked, false - unchecked)
• isChecked - Verify if checkbox is checked.
• isCheckBoxVisible - Verify if checkbox is visible

Method Summary

Slider:

• moveSliderTo - Move slider
• sliderValue - Get slider attribute
• minAriaValue - Get min slider value
• maxAriaValue - Get max slider value
• sliderPosition - Get current Slider position value
• isSliderVisible - Check if Slider is visible

Method Summary

Spinner:

• waitToDisappear - Wait when spinner disappears.
• _checkSpinner - Check if spinner exist

• _waitToLoad - Wait to load

Method Summary

Toast Messages:

• isSuccessMsgExists - Check if success toast message appears.
• isErrorMsgExists - Check if error toast message appears.
• isNoticeMsgExists - Check if notice toast message appears.
• _waitOnMsgDisappears - Wait on message and when it disappears.

• isMsgExists - Check if toast message appears.

Method Summary

InputField:

• setValue - Clear field -> Set input field value
• setFieldValue - Set input field value
• clickAndSetFieldValue - Set input field value (use browser.execute)
• uploadFile - Set input field value
• setValuePressEnt - Set input field value and press ENTER
• clearField - Clear field value
• clickClearField - Select field value and delete (Ctrl + a -> Delete)
• deleteAndSetValue - Select field value and delete (Ctrl + a -> Delete) -> Set value -> Press Enter
• getValue - Get input field value.
• getTextValue - Get input field text.
• getTextContent - Get input field text Content.
• isFieldVisible - Check if field visible

• clickInField - Click inside field

Method Summary

How to use:

1. Create CheckBox class

import { CoreCheckBox } from 'wdio-enverus-core-ui-elements';
import spinner from './spinner';

export default class CheckBox extends CoreCheckBox {
    constructor (checkBoxLocator, checkBoxClassAttribute = true) {
        super();

        this.checkBox = checkBoxLocator;
        this._checkBoxClassAttribute = checkBoxClassAttribute;
    }

    /**
     * Check spinner
     * @returns {Promise.<void>}
     */
    spinner () {
        if (checkSpinner) spinner.waitToDisappear();
    }
}

2. Create InputField class

import { CoreInputField } from 'wdio-enverus-core-ui-elements';
import spinner from './spinner';

export default class InputField extends CoreInputField {
    constructor (inputElmLocator) {
        super();

        this._inputElm = inputElmLocator;
    }

    /**
     * Check spinner
     * @returns {Promise.<void>}
     */
    spinner () {
        if (checkSpinner) spinner.waitToDisappear();
    }
}

3. Create Slider class

import { CoreSlider } from 'wdio-enverus-core-ui-elements';
import spinner from './spinner';

export default class Slider extends CoreSlider {
    constructor (sliderElm) {
        super();
        this._sliderElm = sliderElm;
    }

    /**
     * Check spinner
     * @returns {Promise.<void>}
     */
    spinner () {
        if (checkSpinner) spinner.waitToDisappear();
    }
}

4. Create Spinner class

import { CoreSpinner } from 'wdio-enverus-core-ui-elements';

class Spinner extends CoreSpinner {
    get _spinnerElms () {
        return $$(`//*[contains(@class,'loading-spinner-container') or contains(@class,'ant-spin-spinning')]`);
    }
}

export default new Spinner();

5. Create ToastMsg class

import { CoreSlider } from 'wdio-enverus-core-ui-elements';

class ToastMsg extends CoreSlider {
    _toastMsgWithTitle (MSG_TYPE, TOAST_MSG_TITLE) {
        return $(`//*[contains(@class,'ant-message-${MSG_TYPE}') and .//*[text()='${TOAST_MSG_TITLE}']]`);
    }

    /**
     * Check spinner
     * @returns {Promise.<void>}
     */
    spinner () {
        // eslint-disable-next-line no-undef
        if (checkSpinner) spinner.waitToDisappear();
    }
}

export default new ToastMsg();