Applitools webdriverio service does not work with CodeceptJS

[danieltisdale]

What are you trying to achieve?

• I am trying to use the Webdriverio Applitools service, so that I can integrate Applitools into our existing CodeceptJS tests

What do you get instead?

Provide console output if related. Use --verbose mode for more details.

client.takeSnapshot is not a function

Provide test source code if related

const Helper = codeceptjs.helper;

class Applitools extends Helper {

  async takeScreenshot() {
    let client = this.helpers['WebDriver'].browser;
    return client.takeSnapshot('test');
  }

}

module.exports = Applitools;

Scenario.only(
  'User can navigate to the buy page from the homepage',
  (I, HomePage) => {
    HomePage.goToHomePage(); // opens main page of website
    I.click(HomePage.buttons.buy);
    I.seeCurrentUrlEquals('/buy');
    I.waitForText('Let Us Guide You Home', 5);
    I.takeScreenshot();
  },
).tag('@smoke');

Details

• CodeceptJS version: 2.1.0
• NodeJS Version: 10.15.3
• Operating System: mac OSX
• Protractor || WebDriverIO || Nightmare version (if related): Webdriverio 5.7.2
• Configuration file:

const { resolve } = require('path');

const getConfig = require('./end-to-end/buildConfig');

if (!process.env.SAUCE_ACCESS_KEY || !process.env.SAUCE_USERNAME) {
  require('dotenv').config({
    path: resolve('./config/.saucelabs.env'),
  });
}

if (!process.env.LOGIN_WALL_PASSWORD) {
  require('dotenv').config({
    path: resolve('./config/.env'),
  });
}

const {
  SITE_URL,
  BUILD_ID,
  IS_LOCAL,
  TEST_TAG,
  CIRCLE_LINK,
  GITHUB_LINK,
} = getConfig(process.env);

// eslint-disable-next-line no-console
console.log('Testing against:', SITE_URL);

exports.config = {
  tests: './end-to-end/tests/*.js',
  timeout: 100000,
  output: './end-to-end/output',
  plugins: {
    wdio: {
      services: ['applitools'],
      applitoolsKey: 'XXXXXXXXXXXXXXXXXX',
    },
    retryFailedStep: {
      enabled: true,
    },
    screenshotOnFail: {
      enabled: true,
    },
    autoDelay: {
      enabled: true,
    },
  },
  helpers: {
    WebDriver: {
      // desiredCapabilities: {
      //   browserName: 'chrome',
      //   version: 'latest',
      //   platform: 'Windows 10',
      //   screenResolution: '1920x1080',
      // },
      url: SITE_URL,
      smartWait: 5000,
      browser: 'chrome',
      windowSize: '1920x1080',
      // user: process.env.SAUCE_USERNAME,
      // key: process.env.SAUCE_ACCESS_KEY,
    },
    Applitools: {
      require: './end-to-end/helpers/applitools_helper.js',
    },
    // SauceLabs: {
    //   require: './end-to-end/helpers/SauceLabs.js',
    //   BUILD_ID,
    //   IS_LOCAL,
    //   TEST_TAG,
    //   CIRCLE_LINK,
    //   GITHUB_LINK,
    // },
  },
  multiple: {
    chrome: {
      chunks: 4,
      browsers: ['chrome'],
    },
    firefox: {
      chunks: 4,
      browsers: ['firefox'],
    },
  },
  include: {
    I: './end-to-end/steps.js',
    PropertyDetailsPage: './end-to-end/pages/propertyDetailsPage.js',
    SearchPage: './end-to-end/pages/searchPage.js',
    HomePage: './end-to-end/pages/homePage.js',
    AccountPage: './end-to-end/pages/accountPage.js',
    AgentsPage: './end-to-end/pages/agentsPage.js',
    AgentResultsPage: './end-to-end/pages/agentSearchPage.js',
    ContactPage: './end-to-end/pages/contactPage.js',
    BuyPage: './end-to-end/pages/buyPage.js',
    MortgagePage: './end-to-end/pages/mortgagePage.js',
    SellPage: './end-to-end/pages/sellPage.js',
    CareersPage: './end-to-end/pages/careersPage.js',
    TitleServicesPage: './end-to-end/pages/titleServicesPage.js',
    InsurancePage: './end-to-end/pages/insurancePage.js',
    HomeWarrantyPage: './end-to-end/pages/homeWarrantyPage.js',
    RelocationPage: './end-to-end/pages/relocationPage.js',
  },
  bootstrap: false,
  name: 'Merlin',
};

[kobenguyent]

class Applitools extends Helper

you just create a class named Applitools not trying integrating with applitools, did you try using this feature which is available on codeceptjs v2.1.0 https://codecept.io/plugins/#wdio ?

[danieltisdale]

Hi @PeterNgTr , yes that is what I tried at first and when I tried to call browser.takeSnapshot('test'), I was getting the following error: browser is not defined

[kobenguyent]

@danieltisdale could you try this? https://applitools.com/tutorials/selenium-javascript.html#quick-start-%F0%9F%9A%80

[danieltisdale]

@PeterNgTr try this instead of the steps documented here, https://webdriver.io/docs/applitools-service.html ?

[danieltisdale]

@PeterNgTr I'm a little confused on how to integrate the selenium javascript tutorial that you posted into codecept. Seems like I would need to just use straight javascript to get that to work as opposed to using Codecept. Thoughts on that?

[kobenguyent]

@danieltisdale I think the current wdio service plugin of CodeceptJS is not well integrated with Applitools.

[kobenguyent]

@danieltisdale I managed to make this working, not with wdio service plugin but modifying the core itself.

[danieltisdale]

@PeterNgTr can you provide me the updates that you made please? I'm not having any luck getting it to work

[kobenguyent]

@danieltisdale I tried to modify the webdriver helper referring to this https://applitools.com/tutorials/webdriverio.html#run-your-first-test but yeah, not fully working, just to make sure applitools and codeceptjs are talking with each other.

[danieltisdale]

@PeterNgTr ok thanks! Please let me know if you are able to find a working solution for this as we are eager to get Applitools and Codecept working together

[kobenguyent]

https://www.npmjs.com/package/codeceptjs-applitoolshelper feel free to try my helper for it!

[elgalu]

Is codeceptjs-applitoolshelper the way to go then? ping @yuriieasternpeak @amitzur