Unable to click or extract class string for Vuetify button

Technology specific object identification, supported applications, web technologies, and 3rd party controls.
sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Unable to click or extract class string for Vuetify button

Post by sarahw » Fri Jun 22, 2018 11:45 am

We've just started developing a site using Vue.js and Vuetify. I'm finding that with both the Vuetify showcase and our web product that Ranorex will not click an object identified by a button tag. Does anyone have an idea why this is failing?

The showcase is here:
https://vuetifyjs.com/en/components/buttons

I've mocked up a test using this rather than our developed product as it should be easier for you to see and try our.

The repository object which fails is identified with this RanorexPath

Code: Select all

.//button[@type='button' and @class='btn success']
Which is looking for this Success button on the page:

Code: Select all

<button type="button" class="btn success" style="position: relative;">
<div class="btn__content">Success</div>
</button>
Trying to call .Click() on this repository object fails with this error:

Code: Select all

Item 'VueInvestigationRepository.Vuetify.SuccessBtn' is no Button.
The element does not support the required capability 'button'. 
Show/Hide Stacktrace
at Ranorex.Core.Repository.RepoItemInfo.FindInternal[T](Boolean findSingle, Boolean throwException, Duration effectiveTimeoutOverride) at Ranorex.Core.Repository.RepoItemInfo.<>c__DisplayClass75_0`1.<Find>b__0() at Ranorex.Core.Testing.Services.NoMaintenanceModeService.HandleElementNotFound[T](Func`1 action, RepoItemInfo entry) at Ranorex.Core.Repository.RepoItemInfo.Find[T](Boolean findSingle, Boolean throwException, Duration effectiveTimeoutOverride) at Ranorex.Core.Repository.RepoItemInfo.CreateAdapter[T](Boolean throwException, Duration waitTimeout) at Ranorex.Core.Repository.RepoItemInfo.CreateAdapter[T](Boolean throwException) at VueInvestigation.VueInvestigationRepositoryFolders.VuetifyAppFolder.get_SuccessBtn() in c:\Users\sarah.woodhouse\source\repos\Ranorex\VueInvestigation\VueInvestigation\VueInvestigationRepository.cs:line 985 at VueInvestigation.VueButton.Ranorex.Core.Testing.ITestModule.Run() in c:\Users\sarah.woodhouse\source\repos\Ranorex\VueInvestigation\VueInvestigation\VueButton.cs:line 59 at Ranorex.Core.Testing.TestModuleLeaf.RunInternal(DataContext parentDataContext, Int32 iteration, Int32 iterationCount, Boolean skipIteration)
If I define the repository object in this manner, .Click() succeeds:

Code: Select all

.//button[@type='button' and @class='btn success']/.//div[@class='btn__content']
So I do have a work around for clicking but it is a bit annoying that Ranorex doesn't think a button tag is an actual button.

The more difficult problem which has just cropped up this morning I can't see how to get around yet. This is for an example on our site, I'm trying to access the class string for a button object to determine whether it's in the active state.

The button:

Code: Select all

<div class="speed-dial speed-dial--right speed-dial--bottom speed-dial--fixed speed-dial--direction-top" open-on-hover="true" data-v-5cad50f3="">
<button type="button" class="btn btn--floating btn--raised theme--dark orange" data-ripple="true" hover="" style="position: relative;">
<div class="btn__content">
<i class="material-icons icon">add</i> 
<i class="material-icons icon">close</i>
</div>
</button>
The repository object:

Code: Select all

.//div[@class~'speed-dial']/.//button[@type='button' and @class~'btn']
The code to get the contents of the class attribute from the button tag. Note that the class attribute only includes the word active when the button is clicked and open, so that's what I'm checking for.

Code: Select all

public static bool FABOpen()
		{
			string fabStatus = repo.FormularyTree.Tree.FABStatus.GetAttributeValue<string>("class");
			bool fabActive;
			
			if (fabStatus.Contains("active")) {
				fabActive = true;
			} else {
				fabActive = false;
			}
			
			return fabActive;			
		}
This fails with the same error:

Code: Select all

Item 'DMDSearchRepository.FormularyTree.Tree.FABStatus' is no Button.
The element does not support the required capability 'button'. 
Any suggestions for getting either of these to work on the button tag, especially the second example with extracting the class attribute, would be much appreciated.

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: Unable to click or extract class string for Vuetify button

Post by Support Team » Mon Jun 25, 2018 2:18 pm

Hi Sarah,

Thank you for reporting this observation.

The behavior is most likely related to the fact that the Repository Items were created manually and are therefore missing the correct capabilities. You should be able to click on the buttontags when the item was added to your Ranorex Repository via tracking functionality. This implicitly fetches all capabilities and ensures that the objects are mapped correctly.

I've also informed our development team so they will take a closer look at this and perhaps implement an option to fetch the capabilities even if the object was created manually.

Should you need any further information, please do not hesitate to contact us again.

Regards,
Markus (S)
.
Image

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unable to click or extract class string for Vuetify button

Post by sarahw » Tue Jun 26, 2018 10:27 am

Hi Markus,

Thank you for replying. If I use Track to create the button in the repository, Ranorex tracks a div inside the button as opposed to the button itself. This isn't how I want to identify the button so it leaves me no closer to a direct solution unfortunately.

Since posting I've found that if I define the button as below in the repository then it will work, so this is a workaround for now. I'd still really appreciate if tracking a button tag directly actually worked though.

Code: Select all

.//div[@class~'speed-dial']/.//tag[@tagname='button' @type='button' and @class~'btn']

Vaughan.Douglas
Posts: 250
Joined: Tue Mar 24, 2015 5:05 pm
Location: Des Moines, Iowa, USA

Re: Unable to click or extract class string for Vuetify button

Post by Vaughan.Douglas » Tue Jun 26, 2018 12:10 pm

I deal with an Oracle product that presents a similar issue even if I record the object or create it manually.

I've found that rather than using 'button', 'buttonTag' generally resolves the issue.

For example:
Whereas this will result in a "is no button" error

Code: Select all

//button[@innertext='Cancel']
This works just fine

Code: Select all

//buttonTag[@innertext='Cancel']
Doug Vaughan

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unable to click or extract class string for Vuetify button

Post by sarahw » Fri Jul 13, 2018 12:53 pm

Hi Doug,

Thank you, that's definitely a bit quicker than my workaround of defining the tag name. I can confirm it does work for me, so I'll use this method from now on.