Cannot find how to work with Ids for Text box to get Selenium tests to correctly interact with them.

[Michael]

5:45 PM found this SO post: Selenium with Kendo UI

Is the 'hard way' of writing xpath in C# the way to do this, using Se Web Driver? The post is 6 years old ... there's not a better way?

Crossing my fingers, there's an easier way than running the test, letting it fail, mapping out x-path, rinse-lather-repeat, eventually get there? :)

==================== Above New info as of 5:45 20 Nov =====================

 

Looking over the docs, I find nothing helpful with learning how to make the kendo textbox interactive with Se Tests.

Here is what I'm facing, I'm inserting from some emails and a Stack O post.

It appears our .scss file is a major player here.  There isn’t a clear input for the Se tests to see where to put what.  I don’t know enough about SCSS SASS to be sure but finally tracked down the id being tacked on to the k-input-inner class.  From this I sort of catch on to what’s zapping us with using the Se Web Driver and Se IDE tests.

 Here is the Id noted: k-d6dd8b3b-9d55-45cb-927c-634d4f11473c.  Note how it is prepended to the k-input-inner to render the text.  This appears really super nested.  I think the test can’t find where to put the text and just puts it an input at the first point in the hierarchy it finds. 

 See Screenshot_1.png 

The green shows where I typed the text in the intended text location.  Yellow shows where the test put it – in the validator indicator span, forgive any terminology error there.  I’m not seeing the same inner text area as in the top screen shot.

 

My conclusion is the _inputs.scss file might be the issue.  We’re having rendering given 2 different ways depending on whether we run the test or spin the page up in dotnet watch run.

 

I’m trying to find where in the _inputs.scss file is the starting point, to drill further into the issue. The closest I can find is on line 332:

.k-maskedtextbox {

  height: 1.3rem;

 

  input.k-input-inner {

    font-size: 12px;

    padding: 1px 3px 0px;

  }

}

If this is right, in order to use Se IDE, Web Driver or Grid, we may have to rethink our SCSS strategy.  I’d say that’s above my pay grade.

 

Still, can we take a look at this?

See Screenshot_2.png

My lead got back with me to clarify that while CSS can be used in design in our case it is not, and to look instead into the Kendo docs for how ids are generated and so on.

Well, looking in the docs I see how to set up a basic project and get basic code working.  Can't find anything on how to do what I need -- how to make Se tests drive Kendo elements for doing tests.

 

 

[Michael]

This is now resolved. Yes, XPath fixes it but finding where to fix it and why, from Inspect in Dev Tools, that's another thing. I have notes in the next several slides of the data trail followed and what filled gaps in my knowledge along the way.

Part of the confusion was not being able to modify the text in ng-reflect-model, which is where text typed into the text box ends up:

See Textbox XPath Send Keys 4, the .png attached above.

Reading this link, Selenium with Kendo UI, more closely and just taking the leap of faith that Inspect takes one to the nested input nested in kendo-textbox and just below the span element, this is where the following x-path was figured out:

See Textbox XPath Send Keys 6, the .png attached above.

Looking at the the form via Inspect, and trying to piece this together, can really get one lost fast. There's a bit of Angular directive technology at work here, that's another leap of faith -- 'The Kendo Team has this!' :) is pretty much what I realized. Here is an input element where the input won't show up. But you have the test target this element and it will.