Kendo UI jQuery Upload click not working

[Wayne Hiller]

Test Framework 2019.3.1003.2

Kendo UI jQuery 2019.3.1023

 

I have this code to test a Kendo UI Upload:

Browser.WaitForElement(10000, $"id={id}").As<HtmlInputFile>().Click();

 

This used to work in previous versions but now it does nothing and the File Open Dialog is never displayed. If I manually click the button in the browser it works. I do not get any errors.

 

[Elena]

Hi Wayne,

Based on the shared details it seems like the button is not found on the page. What is the error that you get from the execution of this test? Or there are no errors and only the FileOpen Dialog is not opened? 

Can you, please, try to separate the used code to first locate the input element and then click it. That way it will be easier to debug what the actual issue is. You can try creating a new find expression for this element and find out if this needs to be updated. 

I hope this will be helpful for you. Of course, I remain available to continue the discussion if you need further assistance. Thank you for your cooperation in advance.

Regards,
Elena
Progress Telerik

 

[Wayne Hiller]

It is finding the <input type="file" /> and the Click executes but nothing happens. The Open file dialog is never opened. If I quickly click the upload button it will open the dialog and continue the test.

Wayne

[Elena]

Hi Wayne,

Thank you for the clarification. 

Basically, there are two possible options based on the details I have so far - one is that the button is not correctly located and the click action is sent against any element on the page, which corresponds to that find logic. The other is that the used click action does not trigger the necessary events and the Open file dialog never appears.

Since you can confirm the input control is correctly located, then you can try to use the MouseClick() method instead. WIll this bring any difference in the test execution behavior? 

Apart from that, I will appreciate if you elaborate further details on the case - you mentioned it was working before. Have you upgraded Test Studio or the Testing Framework, or the page under test is using newer Kendo controls since the dialog does not appear. What changed to introduce the failing line of code. 

I found a sample of a Kendo UI Upload here - can you please, transform the code you are using and test it against that page? In case you are able to reproduce the same failure, please share the exact code you tested. 

Thank you once again for your cooperation.

Regards,
Elena
Progress Telerik

 

[Wayne Hiller]

I am still having the issue using the MouseClick method. I have updated both kendo UI jQuery and the Testing Framework so I am not sure which one is causing this issue.I had not run my testing project for a year so I have updated a number of times since running these tests. I will see if I can reproduce the issue with the Keno Upload demo site.

[Elena]

Hi Wayne,

Thank you for the additional notes shared. Since you haven't been actively using your testing project and you have recently updated both the Testing Framework and the Kendo controls in the application under test, it will be quite of a challenge to drill down which upgrade did introduce the misbehavior. Still, the important here is to find a solution. 

Therefore I tested the sample Kendo upload page on my end and here are few things I noticed about the demo: 

• the Input control can be identified by its id
• the Input control rectangle is larger than what it looks like in the page UI
• the click action on the Input control attempts to click in the center of the control - this causes the click to misbehave due to the larger rectangle; in other words the click action is sent to the center of the input, but it is outside of the visible margins of the control, thus the Upload dialog is never displayed

Having these in mind, I suspect that you may experience the same misbehavior in the actual page under test - of course, this is only an assumption, but you can test it on your end.

In order to check if this suggestion is valid for you as well, you can go through the below steps: 

1. Enable the annotations within the test, which fails - here is a sample how you can do this in code. The annotations will highlight the target element of each action in the code. So executing the test that way, you will be able to see the rectangle of the Input element, or possibly if it is not found on the expected place on the page. The outcome of this run will be really helpful to find out what causes the actual misbehavior.
2. The workaround I applied was to replace the target element of the click action - instead of the nested Input, I used its parent Div element, which can also be uniquely identified using its 'aria-label' attribute (for the example in the sample page). 
3. Another approach you can use is to adjust the Mouse Click action, using any of the available methods (see these listed here), and set coordinates for the click.

Please, give a try to these and in case you still experience troubles, take the time to collect some additional details to provide for the case. You can use the below list as reference:

1. Prepare a short video of the annotated test execution - this will help me understand what might be going wrong. 
2. Share the page under test, or a sample one, against which I can reproduce the same misbehavior. If you can prepare a sample test as well, it will be really useful.
3. Let me know the outcome of applying the proposed workarounds.
4. If there is no option to share the page, please take a snapshot of the DOM tree at the time when the upload dialog should be triggered.

I will be looking forward to hearing back from you, once you have the time to test the shared ideas. In case you have any additional questions, please, do not hesitate to get back to me. 

Regards,
Elena
Progress Telerik