What we use

• WebdriverIO v7
• Jasmine v3.1

Supported Languages

• JavaScript: ES5, ES6
• TypeScript: 3.6.3+

Tested Frameworks

• Lightning JS
• React
• Solid JS
• Vanilla JS

First Test

• A good place to start when developing a first test is WDIO Guides.
• You should get familiar with selectors and asynchronous execution of the test. We only support asynchronous test execution as the synchronous mode is deprecated. For more, you can read here.

const elem = $("h2.subheading a");
elem.click(); // this line will throw an error

Selectors

We support three types of selectors.

• CSS query selectors

// simple CSS selectors
const element = await $("dt");
const elementById = await $("#visible");
const elementByClass = await $(".peace");
// All paragraph elements
const elements = await $$("p");
// You can also chain the selectors
const chainedElement = await $("dl").$(".peace");
const chainedElementByClass = await $("ul").$$(".peace");

• XPath selectors

const element = await $("//dt");
const elementById = await $('//*[@id="visible"]');
const elementByClass = await $('//*[@class="peace"]');
const nestedElement = await $("//li//p");
const moreNestedElement = await $("//li//form//p");
const inputRadioTypeElement = await $('//input[@type="radio"]');
const linkStartsWithHrefElement = await $("//a[starts-with(@href, 's')]");

• React selectors

Evaluating Inside app

It is often a case that you want to evaluate some custom function inside the application running on your testing device. For that, you need the browser.execute function. More information can be found here.

A small example:

const sum = await browser.execute(
  (a, b) => {
    return a + b;
  },
  1,
  2
);

Send Remote Command

One of the most important features of the automated test is to actually simulate the usage of the app by the user. You can do that by sending remote commands to the testing device which will result in user-like input. To send the command, you will need the browser.sendRemoteCommand function.

Example use:

describe("Basic test", () => {
  it("Send Key Up", async () => {
    await browser.sendRemoteCommand("Up");
  });
  it("Send Key Right", async () => {
    await browser.sendRemoteCommand("Right");
  });
  it("Send Key Left", async () => {
    await browser.sendRemoteCommand("Left");
  });
});

Example Test

async function sendKey(key, numberOfRepetitions = 1) {
  for (let index = 0; index < numberOfRepetitions; index++) {
    await browser.sendRemoteCommand(key).catch((err) => {
      if (err.message.includes("No samsung token!")) {
        throw new Error(err.message);
      } else {
        console.log(err);
      }
    });
  }
}

async function getReactElementProps(elementName, propName) {
  return browser.execute(
    function (_name, _propName) {
      var element = window.resq$(_name);
      var returnValue =
        element && element.props && _propName
          ? element.props[_propName]
          : element.props;
      return returnValue;
    },
    elementName,
    propName
  );
}

describe("Basic test", () => {
  it("Positive Test", () => {
    expect(true).toBe(true);
  });
  xit("Negative Test", () => {
    expect(true).toBe(false);
  });
  it("Send Key Up", async () => {
    await sendKey("Up");
  });
  it("Send Key Right", async () => {
    await sendKey("Right");
  });
  it("Send Key Left", async () => {
    await sendKey("Left");
  });
});

describe("Assertions error handling and reporting", () => {
  it('waitUntil "timeoutMsg" reporting', async () => {
    await browser.waitUntil(
      async () => await $("non-existing-selector-css").isExisting(),
      {
        timeout: 1000,
        timeoutMsg: "Example of waitUntil timeout message",
      }
    );
  });

  it('waitUntil "timeoutMsg" reporting using xPath', async () => {
    await browser.waitUntil(
      async () =>
        $(
          "//div[contains(@data-test-id,'non-existing-selector-xpath')]"
        ).isExisting(),
      {
        timeout: 1000,
        timeoutMsg: "Example of waitUntil timeout message",
      }
    );
  });
});

describe("Get Elements of Context Element", () => {
  it("Regression Element test", async () => {
    const element = await $("#div1").isExisting();
    expect(element).toBe(true);

    const element2 = await $('//div[@id="div1"]').isExisting();
    expect(element2).toBe(true);

    const heading = await $("#heading2").isExisting();
    expect(heading).toBe(true);

    const heading2 = await $("//h2").isExisting();
    expect(heading2).toBe(true);
  });

  it("Get Element of Element", async () => {
    const heading = await $("#div1").$("#heading2").isExisting();
    expect(heading).toBe(true);

    const heading2 = await $('//div[@id="div1"]').$("//h2").isExisting();
    expect(heading2).toBe(true);
  });

  it("Get Elements of Element", async () => {
    const heading = await $("#div1").$$("#heading2");
    expect(heading).toBeTruthy();

    const heading2 = await $('//div[@id="div1"]').$$("//h2");
    expect(heading2).toBeTruthy();
  });

  it("Negative Get Element of Element CSS Selector", async () => {
    const heading = await $("#div1").$("#heading3").isExisting();
    expect(heading).toBe(false);
  });

  it("Negative Get Element of Element XPath Selector", async () => {
    const heading2 = await $('//div[@id="div1"]').$(".//h3").isExisting();
    expect(heading2).toBe(false);
  });

  it("Negative Elements of Element CSS Selector", async () => {
    const heading = await $("#div1").$$("#heading3");
    expect(heading).toHaveSize(0);
  });

  it("Negative Elements of Element XPath Selector", async () => {
    const heading2 = await $('//div[@id="div1"]').$$(".//h3");
    expect(heading2).toHaveSize(0);
  });
});

describe("React execute return values", () => {
  it("Execute and React Resq values positive", async () => {
    const value = await getReactElementProps("ChannelSwitcher", "persistent");
    expect(value).toBe(false);
  });

  it("Execute and React Resq values positive, using react$ and circular negative case", async () => {
    const element = await browser.react$("ChannelSwitcher");
    expect(element).toBeFalsy();
  });

  it("Execute and React Resq values positive, using react$ and circular negative case", async () => {
    const value = await getReactElementProps("ChannelSwitcher", "items");
    const length = value.length;
    console.log("Length of element ", length);
    expect(length).toBeTruthy();
  });
});