Testcafe 无法使用 Selector.withText() 过滤 <tspan>

Question

我正在尝试使用选择器过滤 svg 图上的元素：Selector('.joint-type-mapping-record .v-line').withText('testElement')。但结果是收到一条消息，在 DOM.

中找不到元素

我检查过 innerText 可用于 <tspan>，但事实并非如此。然后我尝试添加自定义DOM属性（addCustomDOMProperties({ innerText: (el) => el.innerText });），但出现错误：1) TypeError: Cannot redefine property: innerText

有什么方法可以使用 withText() 来处理 <tspan> 吗？

这里是页面代码：

<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>

Answer 1

TestCafe 默认不搜索 svg 元素内的 HTML 元素。为此，您可以使用带有客户端函数的选择器 initialized。看看下面的例子：

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');
});

Testcafe 无法使用 Selector.withText() 过滤 <tspan>

Testcafe unable to filter <tspan> using Selector.withText()

svg

automated-tests

tspan

e2e-testing

testcafe