Node.js Puppeter中的page.select（）与剑道下拉列表中的expeted不一样

Puppeter中的page.select（）在剑道下拉列表中未按预期工作，不会引发任何错误。但该值未被选中 我使用木偶演员5.6.0

sync function create(page)
{
    const engCreationbtn = await page.$('.AddEngBtn');
    await engCreationbtn.click();
    await page.type('#createEngSidebar input[name="engName"]','puppeteer',{delay:20});
    //await page.select('#createEngSidebar select[name="engType"]', 'Audit')
    await page.select('select[name="country"]','IN')
    await page.type('#createEngSidebar input[name="KPMGOffice"]','Tice',{delay:20});
    //await page.select('#createEngSidebar select[name="timezone"]','India Standard Time||Asia/Kolkata',{delay:20})
    await page.type('#createEngSidebar input[name="ClientName"]','pup-pepsi',{delay:20});
    await page.type('#createEngSidebar .flyoutctrlpart .k-numeric-wrap .k-input','133',{delay:20});

    const createbtn = await page.$('#createEngSidebar .flyoutfooter .btnPrimary');
    await page.screenshot({path: 'engCreation.png'});
    await createbtn.click();

    await page.screenshot({path: 'afterengCreation.png'});

}

我试图设置的Html

<div class="flyoutctrlpart">
                    <span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-busy="false" style="" aria-activedescendant="3f3ec341-a8f4-45bb-b617-0ce20b6b3db2"><span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input">Select Country/Jurisdiction</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span><select name="country" kendo-drop-down-list="" k-data-text-field="'name'" k-data-value-field="'code'" k-data-source="engPopCtrl2019V1.countryList" k-option-label="engPopCtrl2019V1.SelectCountry" k-value-primitive="true" k-on-change="engPopCtrl2019V1.CountryChanged()" k-ng-model="engPopCtrl2019V1.country" data-role="dropdownlist" style="display: none;"><option value="" selected="selected">Select Country/Jurisdiction</option><option value="AF">Afghanistan</option><option value="AL">Albania and Kosovo</option><option value="DZ">Algeria</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="SI">Slovenia</option><option value="ZA">South Africa</option><option value="SP">Spain</option><option value="LK">Sri Lanka</option><option value="LC">St. Lucia</option><option value="MF">St. Maarten</option><option value="VC">St. Vincent and the Grenadines</option><option value="SR">Suriname</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TW">Taiwan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TG">Togo</option><option value="TT">Trinidad and Tobago</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TC">Turks &amp; Caicos</option><option value="AE">UAE</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="UK">United Kingdom</option><option value="US">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option></select></span>
                </div>

• page.select（）

  仅对

  select

  元素有效，而不是像

  span

  这样的自定义元素，它的行为与预期一样
• Kendo将数据绑定到select元素，因此当您选择/更新select元素时，它不会更新

最简单的方法是使用kendoUI本身

在演示页面上，UI通过以下方式初始化：

var size = $("#size").data("kendoDropDownList");

要设置值

size.value('M - 7 1/4"')

size.value()

要获得价值

size.value('M - 7 1/4"')

size.value()

与输入框相同

var color = $("#color").data("kendoDropDownList");
color.value() // "1" => which is Blank
color.value("2") // "2" => Now it's Orange

以木偶演员为例

const puppeteer = require('puppeteer');
const homepage = 'https://demos.telerik.com/kendo-ui/dropdownlist/index';

async function test() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(homepage, {waitUntil: 'networkidle2'});

    // use the demo pages built in jQuery and Kendo to change the results
    const sizeValue = await page.evaluate(()=>{
       var size = $("#size").data("kendoDropDownList");
       size.value('XL - 7 5/8"')
       return size.value()
    });
    await page.screenshot({path: 'kendoTest.png', fullPage: true});
    await browser.close();

    return sizeValue;
}

test().then(console.log) // should say XL - 7 5/8"

结果:

---

是否可以在公共站点进行测试？剑道演示网站？我也尝试过用代码更新这个问题，这是为我做的。