TestCafe-<选择>中的选择选项

Question

我有一个带有几个标记的。其中一些通过使用“已禁用”类禁用。我想做的是选择列表中的第一个可用选项。为此，我使用了一个在testcafe网站（https://devexpress.github.io/testcafe/documentation/recipes/testing-select-elements.html）上找到的示例，但是我似乎无法使其正常工作。 运行测试时，该工具在选择上执行一次单击，然后单击第二次关闭。之后，没有选择任何值。 有没有更好的方法来处理选项的动态选择？还是会有更好的解决方案？任何帮助将不胜感激！ 问候 康奈尔 SizeSelector组件： 从“ testcafe”导入{t，Selector}； 类SizeSelector {   constructor（）{     this._sizeSelector = Selector（'。sizeSelectionGroup'）;     this._selectors = this._sizeSelector.child（'。productSizeSelection'）;     this._widthSelector = this._selectors.nth（0）;     //处理其他尺寸类型（单个数字/文本）   }   // todo重构   异步setFirstAvailableWidth（）{     const options = this._widthSelector.find（'option'）; //调试时包含13个元素     const availableOptions = options.filter（node => {       返回！node.classList.contains（'is-disabled'）;     }）;     const count =等待availableOptions.count; //调试时包含约8个元素     如果（count> 0）{       返回等待         .click（this._widthSelector）         .click（availableOptions.nth（0））         .expect（this._lengthSelector.value）.ok（）; //失败，值未定义     }     抛出新的错误（“找不到可用宽度。”）；   } } 导出默认的SizeSelector;

2 个答案:

答案 0 :(得分：4)

因此，我不确定这是否会完全适合您的情况。我尝试使用类'已禁用'模拟具有多个选项的下拉列表，并使用一个函数进行了测试，该函数将单击下拉列表中未禁用的第一个选项，我基于该函数关闭this

这是我创建的示例下拉列表

https://jsfiddle.net/L6p2u/190/

以下是测试代码（橙色应为未禁用的第一个选项）

import { Selector, t } from 'testcafe';

fixture `testcafe canvas`
    .page `https://jsfiddle.net/L6p2u/190/`;

const medwait            = 5000
const longwait           = 15000;
const dropdown           = Selector('#colour');

async function selectFirstAvailableOption(selector) {
    const select = selector;
    await t // select the first available option
        .setTestSpeed(0.7)
        .hover(select)
        .expect(select.hasAttribute("disabled")).notOk({timeout: 5000})
        .click(select)
        .click(select
            .find("option")
            .filter((node) => {
                if (node && node.className.indexOf('is-disabled') == -1) {
                    return true;
                }
                return false;
            })
            .nth(0)).wait(5000); // this wait is just so you can see
}

test('Instructor', async t => {
    await t
        .switchToIframe('[name="result"]')
    await selectFirstAvailableOption(dropdown);
});

答案 1 :(得分：0)

使用该解决方案，可以在与下拉菜单进行交互时避免调用“ .setNativeDialogHandler（（）=> true）”。

export async function create(name) {
  const dropdown = await Selector("#dropDownID");
  const dropdownOption = dropdown.find("option");

  await t
    .click(dropdown)
    .click(dropdownOption.withText(name))
    .click(Selector("#submitBtn"));
}

相关问题

• 多个选择选项中的默认选择选项
• 如何期望url在TestCafe中重定向？
• 在JS中选择第二个提交按钮
• 在Testcafe中使用document.getElementsByClassName
• Check if img src has correct path in TestCafe
• 在requesthook中更改请求URL
• TestCafe-<选择>中的选择选项
• 结合使用HTTPS和remoteConnection选项
• 在ant-select
• 如何等待直到在TestCafe中执行角度执行？

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

因此，我不确定这是否会完全适合您的情况。我尝试使用类'已禁用'模拟具有多个选项的下拉列表，并使用一个函数进行了测试，该函数将单击下拉列表中未禁用的第一个选项，我基于该函数关闭this

这是我创建的示例下拉列表

https://jsfiddle.net/L6p2u/190/

以下是测试代码（橙色应为未禁用的第一个选项）

import { Selector, t } from 'testcafe';

fixture `testcafe canvas`
    .page `https://jsfiddle.net/L6p2u/190/`;

const medwait            = 5000
const longwait           = 15000;
const dropdown           = Selector('#colour');

async function selectFirstAvailableOption(selector) {
    const select = selector;
    await t // select the first available option
        .setTestSpeed(0.7)
        .hover(select)
        .expect(select.hasAttribute("disabled")).notOk({timeout: 5000})
        .click(select)
        .click(select
            .find("option")
            .filter((node) => {
                if (node && node.className.indexOf('is-disabled') == -1) {
                    return true;
                }
                return false;
            })
            .nth(0)).wait(5000); // this wait is just so you can see
}

test('Instructor', async t => {
    await t
        .switchToIframe('[name="result"]')
    await selectFirstAvailableOption(dropdown);
});

Answer 2

使用该解决方案，可以在与下拉菜单进行交互时避免调用“ .setNativeDialogHandler（（）=> true）”。

export async function create(name) {
  const dropdown = await Selector("#dropDownID");
  const dropdownOption = dropdown.find("option");

  await t
    .click(dropdown)
    .click(dropdownOption.withText(name))
    .click(Selector("#submitBtn"));
}