How to get only Text within the div, rather concerning about any internal tags in TestCafe

Question

I need only the text Gaps in Care, Took selector as div.patient-contact-popup li.nav-item a , it results as Gaps in Care1. How/What will be selector, to get only the text portion not any numeric because it is dynamically changed.

Please refer the attached screenshot, for more details

Answer 1

You can use the childNodes DOM property and TestCafe ClientFunction API to achieve the required behavior. The following test example demonstrates this approach:

import { Selector, ClientFunction } from 'testcafe';

fixture `My fixture`
    .page `https://b22yw.csb.app/`;

test('Check navlink text', async t => {
    const navLink = Selector('.nav-link');

    const getNavLinkText = ClientFunction(() => navLink().childNodes[0].textContent.trim(), {
        dependencies: { navLink }
    });

    await t.expect(getNavLinkText()).eql('Gaps in Care');
});