codeceptjs-applitoolshelper

Integration of Applitools with CodeceptJS.

The codeceptjs-applitoolshelper is a CodeceptJS helper designed to publish test results on Applitools after test execution.

Installation

npm i codeceptjs-applitoolshelper --save
npm i webdriverio@5 --save

Configuration

Add the helper to codecept.conf.ts:

helpers: {
  Playwright: {
    // ... Playwright configuration
  },
  ApplitoolsHelper: {
    require: 'codeceptjs-applitoolshelper', 
    apiKey: 'YOUR_API_KEY',
    debug: true // enable verbose log
    // ... other configuration options
  },
}

| Key | Description | |--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | (Required) API key found under the user menu on the right-hand side of the test manager toolbar. | | windowSize | (Optional) Window size, e.g., 1440x700. If not provided, the default 1920x600 is used. The window size follows this precedence: ApplitoolsHelper, Webdriver. | | appName | (Optional) Desired application name. If not provided, the default 'Application Under Test' is used. | | batchInfo | (Optional) Desired batch info. If not provided, the default 'Visual Tests with the Classic Runner' is used. | | debug | (Optional) Enable verbose log. |

Usage Example

const { I } = inject();

Feature('Applitools functionality');

Scenario('Check home page @test', async () => {
    I.amOnPage('https://applitools.com/helloworld');
    await I.eyeCheck({ pageName: 'Homepage' });
});

Scenario('Check a CTA button on home page @test', async () => {
    const targetElement = 'div.section.button-section > button';
    I.amOnPage('https://applitools.com/helloworld');
    await I.eyeCheck({ pageName: 'CTA button', element: targetElement });
});

// Additional scenarios...

Test Results

• Passed Test:

  CodeceptJS v3.5.11 #StandWithUkraine
  ...
  Applitools functionality --
  [1]  Starting recording promises
  Check home page @test
  I am on page "https://applitools.com/helloworld"
  I eye check {"pageName":"Homepage"}
  ✔ OK in 17113ms
  ...

• Failed Test:

  CodeceptJS v3.5.11 #StandWithUkraine
  ...
  Applitools functionality --
      [1]  Starting recording promises
      Check home page @test
      I am on page "https://applitools.com/helloworld"
      I eye check {"pageName":"Homepage"}
      I am on page "https://google.com"
      ...
      ✖ FAILED in 43435ms
    
  -- FAILURES:
  
  1) Applitools functionality
       Check home page @test:
     Test 'Homepage' of 'Application Under Test' detected differences! See details at: https://eyes.applitools.com/app/batches/xxxx/xxxx?accountId=xxxx
      at ClassicRunner.getAllTestResults (node_modules/@applitools/eyes-api/dist/Runners.js:64:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Test.<anonymous> (applitools_test.ts:9:5)
    
  Scenario Steps:
  - I.eyeCheck({"pageName":"Homepage"}) at Test.<anonymous> (./applitools_test.ts:9:13)
  - I.amOnPage("https://google.com") at Test.<anonymous> (./applitools_test.ts:8:7)
  - I.eyeCheck({"pageName":"Homepage"}) at Test.<anonymous> (./applitools_test.ts:7:13)
  - I.amOnPage("https://applitools.com/helloworld") at Test.<anonymous> (./applitools_test.ts:6:7)
    
  Artifacts:
  - screenshot: /Users/t/Desktop/projects/applitools-example/output/[email protected]
      ...

Example Repo

Explore the functionalities with the example repository.