Question

随着剑道下拉，Puppeteer中的

page.select（）无法正常工作，它不会引发任何错误。但未选择该值正在使用puppeteer 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>

我在剑道站点上尝试过此操作，同样也无法设置值

const puppeteer = require('puppeteer');
const homepage = 'https://demos.telerik.com/kendo-ui/dropdownlist/index';
async function test() {
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.setViewport({width: 1400, height: 1400});
    await page.goto(homepage, {waitUntil: 'networkidle2'});
    await page.select('#size','XL - 7 5/8"');
}

test()

Answer 1

page.select()仅适用于select元素，不适用于span之类的自定义元素，它的行为符合预期。
Kendo将数据绑定到选择元素，因此当您选择/更新选择元素时它不会更新。

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

在演示页面上，UI遵循以下步骤进行初始化，

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

要设置值，

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"

结果：

Puppeteer中的page.select（）无法与剑道下拉菜单一起使用

1 个答案: