路由导航后找不到 Webdriver-io 组件

Question

场景：我网站的访问者单击 link 并导航到显示一些文本的页面。

问题：我正在尝试测试当用户单击 link 时是否显示组件。

当我运行调试时，我看到显示了组件，但是测试失败。有什么想法我在测试中遗漏了什么吗？

谢谢

组件

主页组件

import React from 'react';
import { Link } from 'react-router-dom';
import styles from './home-page.scss';

const HomePage = () => {
    return (
        <div
            data-qa="home-page"
            className={styles.container}
        >
            <h2 data-qa="home-page-title">Home page</h2>
            <div data-qa="content-page-link">
                <Link to="/content">Content Page</Link>
            </div>
        </div>
    );
};

export default HomePage;

内容页面组件

import React from 'react';
import { Link } from 'react-router-dom';
import Content from '../content';
import styles from './content-page.scss';

const ContentPage = () => {
    return (
        <div
            data-qa="content-page"
            className={styles.container}
        >
            <h2 data-qa="content-page-title">Content Page</h2>
            <Content />
            <div data-qa="home-page-link">
                <Link to="/">Home Page</Link>
            </div>
        </div>
    );
};

export default ContentPage;

内容组件

import React from 'react';
import styles from './content.scss';

const Content = () => {
    return (
        <div
            data-qa="content"
            className={styles.container}
        >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    );
};

export default Content;

测试

describe('content page', () => {
    it("should navigate to content page", async () => {
        await browser.url('http://localhost:9000');
        const contentLink = await browser.react$('Link', {
            props: {
                to: '/content'
            }
        });

        await contentLink.click();

        // await browser.debug();

        expect(await (await browser.react$('Content')).isDisplayed()).toBe(true);
    });
});

INFO webdriver: RESULT { message: 'React element with selector "Content" wasn't found' }

Answer 1

我认为这可能是 resq library that webdriverio uses. It seems it doesn't refresh the virtual dom tree for every search. A very hacky workaround is to force the refresh by resetting a flag called isReactLoaded 在查找元素之前的错误。

        await contentLink.click();
        
        // force refresh dom after event
        await browser.execute(() => {
            isReactLoaded = false;
        });

        expect(await (await browser.react$('Content')).isDisplayed()).toBe(true);

路由导航后找不到 Webdriver-io 组件

Webdriver-io Component not found after route navigation

reactjs

webdriver-io

组件

主页组件

内容页面组件

内容组件

测试