Forms.wdio (undefined (reading 'waitForClickable'))

Technical Support Development
1

I am running this code for the test of reports but the test is giving error-
Errors—

API startup: Getting default forms
[0-0] RUNNING in chrome - file:///tests/e2e/visual/targets/targets-overview.wdio-spec.js
[0-0] 2025-05-02T10:58:36.479Z ERROR webdriver: Request failed with status 400 due to element click intercepted: element click intercepted: Element <label class="">...</label> is not clickable at point (979, 615). Other element would receive the click: <div class="cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing"></div>
[0-0]   (Session info: chrome=136.0.7103.59)
[0-0] TypeError in "Pregnancy Visit.should submit a pregnancy visit and validate that the report was created successfully."
TypeError: Cannot read properties of undefined (reading 'waitForClickable')
    at clickFastActionFAB (/home/dhruv11p/cht-core/tests/page-objects/default/common/common.wdio.page.js:209:13)
    at async Object.openFastActionReport (/home/dhruv11p/cht-core/tests/page-objects/default/common/common.wdio.page.js:243:5)
    at async Context.<anonymous> (/home/dhruv11p/cht-core/tests/e2e/visual/targets/targets-overview.wdio-spec.js:95:5)
[0-0] FAILED in chrome - file:///tests/e2e/visual/targets/targets-overview.wdio-spec.js

code below is a copy of “/cht-core/tests/e2e/default/enketo/pregnancy-visit.wdio-spec.js”

const moment = require('moment');
const utils = require('@utils');
const loginPage = require('@page-objects/default/login/login.wdio.page');
const commonPage = require('@page-objects/default/common/common.wdio.page');
const reportsPage = require('@page-objects/default/reports/reports.wdio.page');
const pregnancyVisitForm = require('@page-objects/default/enketo/pregnancy-visit.wdio.page');
const placeFactory = require('@factories/cht/contacts/place');
const userFactory = require('@factories/cht/users/users');
const personFactory = require('@factories/cht/contacts/person');
const pregnancyForm = require('@page-objects/default/enketo/pregnancy.wdio.page');
const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page');
const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
const { generateScreenshot, isMobile } = require('@utils/screenshots');
describe('Pregnancy Visit', () => {
  const places = placeFactory.generateHierarchy();
  const healthCenter = places.get('health_center');
  const offlineUser = userFactory.build({ place: healthCenter._id, roles: ['chw'] });
  const pregnantWoman = personFactory.build({
    date_of_birth: moment().subtract(25, 'years').format('YYYY-MM-DD'),
    parent: { _id: healthCenter._id, parent: healthCenter.parent }
  });

  before(async () => {
    await utils.saveDocs([...places.values(), pregnantWoman]);
    await utils.createUsers([offlineUser]);
    await loginPage.login(offlineUser);
  });

  it('should submit a pregnancy visit and validate that the report was created successfully.', async () => {
    // Create a pregnancy
    await commonPage.goToPeople(pregnantWoman._id);
    await commonPage.openFastActionReport('pregnancy');
    await pregnancyForm.submitDefaultPregnancy();

    // Create a pregnancy visit
    await commonPage.openFastActionReport('pregnancy_home_visit');
    await pregnancyVisitForm.submitDefaultPregnancyVisit();

    // Verify created report
    await commonPage.goToReports();
    const { heading, form } = await reportsPage.getListReportInfo(await reportsPage.leftPanelSelectors.firstReport());
    expect(heading).to.equal(pregnantWoman.name);
    expect(form).to.equal('Pregnancy home visit');

    // Verify that the target tile was updated for pregnancies with 1+ visits
    await commonPage.goToAnalytics();
    await analyticsPage.goToTargets();

    expect(await analyticsPage.getTargets()).to.have.deep.members([
      {title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR},
      {title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR},
      {title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies', count: '1', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies with 1+ routine facility visits', count: '1', countNumberColor: TARGET_MET_COLOR},
      {title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)'},
      {title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR}
    ]);

    // Adding 3 more pregnancy home visits to verify the target tile updated for pregnancies with 4+ visits
    await commonPage.goToPeople(pregnantWoman._id);
    await commonPage.openFastActionReport('pregnancy_home_visit');
    await pregnancyVisitForm.submitDefaultPregnancyVisit();
    await commonPage.openFastActionReport('pregnancy_home_visit');
    await pregnancyVisitForm.submitDefaultPregnancyVisit();
    await commonPage.openFastActionReport('pregnancy_home_visit');
    await pregnancyVisitForm.submitDefaultPregnancyVisit();

    await commonPage.goToAnalytics();
    await analyticsPage.goToTargets();
    await browser.pause(2000);
    await generateScreenshot('please', 'Overview');
    expect(await analyticsPage.getTargets()).to.have.deep.members([
      {title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR},
      {title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR},
      {title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies', count: '1', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies with 1+ routine facility visits', count: '1', countNumberColor: TARGET_MET_COLOR},
      {title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)'},
      {title: 'Active pregnancies with 4+ routine facility visits', count: '1', countNumberColor: TARGET_MET_COLOR},
      {title: 'Active pregnancies with 8+ routine contacts', count: '1', countNumberColor: TARGET_MET_COLOR}
    ]);

  });
});
2

hey @dhruv the error suggests that there is no such element on the UI that’s why ths utility function is not working. Try with other utility function

3 Likes
3

Hey @dhruv ! Thanks for sharing the details.

Are you working on a branch or do you have a draft PR I can try out locally? That would help me dig in and support you better.

Also, you can try running the test in debug mode (non-headless) to see exactly what’s happening in the browser — that might give more insight into why the click is being intercepted by the overlay.

Let me know how you’d like to proceed!

1 Like
5

@dhruv To run the tests in debug mode, you can use a command like:

DEBUG=true npm run wdio-visual-mobile

This will open the browser so you can see what’s happening during the test run.

You can read more in our documentation here.

Just a heads-up: when using debug mode, the containers and volumes won’t be cleaned up automatically — you’ll need to delete them manually afterward.

1 Like
6

Thanks @Lorena_Rodriguez. DEBUG feature helped me and I have completed the task.

2 Likes