在ant-select

Question

我想在测试咖啡馆的模态内的“蚂蚁选择”字段中输入一些文本。

这是我正在使用的html：我在测试中打开了两个模态，所以我感兴趣的是第二个。目前，我已经尝试使用以下方法来识别它，但是每次在测试咖啡馆中运行测试时，都会在The element that matches the specified selector is not visible.行中告诉.typeText(LayerNameInputForDeletion, layerName, { replace: true })：

/*
goal: open layer adding modal, close it by 
hitting OK, thus accepting the current settings.
Then open layer deleting modal and remove the new layer
 */
test('Can open and accept default layer adding pop up', async t => {

    let layerName = "MyGreatLayer";

    ...

    //open second modal
    await t
        .click('#LayerDeletingPopUpButtonID');

    //select layer delete OK button
    const LayerDeletingModalOKButton = Selector('div.ant-modal').nth(1)
        .find('div.ant-modal-footer')
        .find('button.ant-btn-primary');

    //XXX this selector fails to find the element
    //select the input field from ant Select to enter layer name
    const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
        .find('div.ant-modal-body')
        .find('input.ant-select-search__field');

    //click OK button from second modal after typing in layer name
    await t
        .expect(LayerDeletingModalOKButton.with({visibilityCheck: true}).exists)
        .ok({timeout: 30000})
        .hover(LayerDeletingModalOKButton)
        //this typing step fails to find the element
        .typeText(LayerNameInputForDeletion, layerName, { replace: true })
        .click(LayerDeletingModalOKButton);
});

此选择器无法在ant-Select字段中找到输入字段：

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
    .find('div.ant-modal-body')
    .find('input.ant-select-search__field');

我尝试了几种不同的选择器，但无济于事：

更具体的内容：

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
    .find('div.ant-modal-body')
    .find('div.ant-select-selection__rendered')
    .find('div.ant-select-search')
    .find('input.ant-select-search__field');

当我从Chrome的“检查”页面中选择“复制选择器”时给出的确切路径：

const LayerNameInputForDeletion = Selector('body > div:nth-child(9) > div > 
    div.ant-modal-wrap > div > div.ant-modal-content > 
    div.ant-modal-body > div > div > div > 
    div.ant-select-search.ant-select-search--inline > div > input');

以上方法的组合：

const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
        .find("div.ant-modal-content > 
               div.ant-modal-body > div > div > div > 
               div.ant-select-search.ant-select-search--inline > 
               div > input");

我在这里想念什么？如何选择要输入的元素？

Answer 1

父div有style="display: none;"。

因此您不能在不可见的输入字段中键入文本。