我有一个带有几个<select>
标签的<option>
。其中一些是使用'is-disabled'类禁用的。我想要做的是选择列表中的第一个可用选项。为此,我使用了我在testcafe网站(https://devexpress.github.io/testcafe/documentation/recipes/testing-select-elements.html)上找到的一个例子,但我似乎无法让它工作。
运行测试时,该工具会对选择执行单击,然后执行第二次关闭。在此之后,没有选择任何值。
有没有更好的方法来处理选项的动态选择?或者什么是更好的解决方案?任何帮助将不胜感激!
关于Cornel
SizeSelector component:
import {t, Selector} from 'testcafe';
class SizeSelector {
constructor() {
this._sizeSelector = Selector('.sizeSelectionGroup');
this._selectors = this._sizeSelector.child('.productSizeSelection');
this._widthSelector = this._selectors.nth(0);
// todo other size types (single numeric/text)
}
// todo refactor
async setFirstAvailableWidth() {
const options = this._widthSelector.find('option'); // contains 13 elements while debugging
const availableOptions = options.filter(node => {
return !node.classList.contains('is-disabled');
});
const count = await availableOptions.count; // contains around 8 elements while debugging
if (count > 0) {
return await t
.click(this._widthSelector)
.click(availableOptions.nth(0))
.expect(this._lengthSelector.value).ok(); // fails with value undefined
}
throw new Error('No available width found.');
}
}
export default SizeSelector;
所以我不确定这是否适合你的情况。我尝试使用类'is-disabled'来模拟一个有几个选项的下拉列表并使用一个函数进行测试,该函数将单击下拉列表中未被禁用的第一个选项我基于this的函数
这是我做的示例下拉列表
https://jsfiddle.net/L6p2u/190/
这是测试代码(Orange应该是第一个未禁用的选项)
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);
});