2

I'm trying to filter elements on the svg diagram using selector: Selector('.joint-type-mapping-record .v-line').withText('testElement'). But in a result a got a message, that give element not found in DOM.

I checked that innerText is available for <tspan> and it isn't. Then I tried to add customDOMProperties (addCustomDOMProperties({ innerText: (el) => el.innerText });), but got error: 1) TypeError: Cannot redefine property: innerText

Is any way to handle <tspan> using withText()?

Here the page code:

<g model-id="6c1b0506-321a-4c27-8a06-7f2bfa5851ed" data-type="mapping.Record" id="j_488" class="joint-cell joint-type-mapping joint-type-mapping-record joint-element joint-theme-default" magnet="false" transform="translate(-171,99)">
<text joint-selector="headerLabel" id="v-11781" font-size="20" xml:space="preserve" font-family="Galano Grotesque" font-weight="500" text-anchor="middle" text-vertical-anchor="middle" fill="#333333" transform="matrix(1,0,0,1,109,15)">
<tspan dy="0.3em" class="v-line">testElement</tspan></text></g>
Alex Skorkin
  • 4,264
  • 3
  • 25
  • 47
Dmitry
  • 91
  • 6

1 Answers1

2

TestCafe doesn't search for HTML elements inside an svg element by default. You can use a selector initialized with a client function for this purpose. Take a look at the following example:

import { Selector } from 'testcafe';

fixture `New Fixture`
    .page `https://xg35y.csb.app/`;

test('New Test', async t => {
    const getVlineElement = Selector(() => {
        const allVlineElements = document.querySelectorAll('.joint-type-mapping-record .v-line');

        return [].slice.call(allVlineElements)
            .filter(tspan => tspan.textContent === 'testElement')[0];
    });

    await t
        .expect(Selector(getVlineElement).textContent).eql('testElement');
});
wentwrong
  • 711
  • 4
  • 7
aleks-pro
  • 1,659
  • 4
  • 12
  • Thanks, @aleks-pro for your answer. It works for me. Could you explain why you call Selector for `const getVlineElement` and then inside `t.expect`? – Dmitry Oct 11 '19 at 16:35
  • 3
    Looks like a typo. I think it is not necessary to wrap the `getVlineElement` selector in the Selector function one more time. – Alex Kamaev Oct 14 '19 at 09:56