Select a KendoReact DropDown Item Using Selenium

[GokuJim]

We are attempting to create automated Selenium web driver based tests of our KendoReact based web application. Our tester is attempting to find one of the options to select using Selenium, and there does not seem to be any <option> entries available to select from in the DOM. How can we accomplish this, and via which element selector can we use?

Thanks,

Jim

SKF USA, Inc.

[Stefan]

Hello, James,

This is one of our tests for checking the selected value:

    'DropDownList selected value rendering': (browser) => {
        browser
            .click('.k-dropdown')
            .pause(defaultAnimationDuration)
            .click('.k-item:nth-child(2)')
            .pause(defaultAnimationDuration);

        browser.expect.element('.k-input').text.to.equal('BMW');
    },

We have many unit and e2e tests for all of our components.

What I can suggest is taking our repository with the source code and checking all of the tests we have, to see which one of them can be used as well:

https://www.telerik.com/kendo-react-ui/components/installation/source-code/

For our e2e test we use NightWatch, which is Selenium based.

Regards,
Stefan
Progress Telerik

[GokuJim]

Thanks Stefan for the example, however, we are using the C# based Selenium library with a Chrome Selenium driver, and the syntax is a little different. We're trying to now select a TabStripTab item, and realized that we cannot put any additional HTML tags on them, as class name, id and name all are thrown out when Kendo draws the ul/li elements behind the TabStrip/TabStripTab components.

[Stefan]

Hello, James,

Depending on what has to be selected there are two options:

1) Selection of the tab item. This can be done by rendering a custom title, this allows rendering a custom element that can have any attributes that are needed

https://www.telerik.com/kendo-react-ui/components/layout/api/TabStripTabProps/#toc-title (The title can be React component)

2) Selection of the tab content. This can be done by using the contentClassName as will allow setting a custom className that later can be used to select the specific tap:

https://www.telerik.com/kendo-react-ui/components/layout/api/TabStripTabProps/#toc-contentclassname

Regards,
Stefan
Progress Telerik