Object is not visible

Hey there! Sometimes, test object (doesn’t matter created manually or using web spy) can’t be found during test suites execution. This happens with different objects very often in both browsers - Chrome and Firefox.

This is the piece of report where you can see that object is not visible:

Here must be opened color picker and in the video record from this report I see that color picker is available:

click to open uploaded report

And this is really strange cause it happens randomly with different objects and even with those object I created manually through the css selector.

Is there anyone who encountered the same problem?

Can you post the css selector?

Exactly this object is created using web spy.
TestObject

But the same problem occurs with objects created with css selectors taken from dev tools. I put the selector in Attributes > css = selector

You’re confusing me. You said you’re using CSS selectors but you’re showing me XPaths.

If you’re using XPaths, you’ll need @Brandon_Hein’s help.

I’m sorry for this. Let me explain again. I tried to create objects both ways:

  • Using web spy (by default it uses XPATH yes). For this way there was a screenshot posted with xpaths.

  • Manually. I copy CSS selector from dev tools and paste in css property of the object:

These are the same objects, but created two different ways. And such problem, that the object is not visible, can be with both objects.

Can you share the HTML for the element you are trying to locate?

1 Like

Just an observation…

From my limited XPath skill set I’m seeing something that looks rather “loose”.

The CSS selector looks rather specific (if cc-dropdown-content.ng-scope is unique across the page).

Would appreciate your thoughts, Brandon.

Yeah I agree (and it’s not surprising, as it was generated from web spy). If we get a glimpse of the HTML of course we can offer a better locator :ok_hand:t2:


Please tell me if this will not be enough, I will try to deploy demo application.

Try this css selector:

cc-color-picker[(on-submit)^=$ctrl.onUserColorChooseWrapper]

Be sure to keep the IFrame selector intact.

Thank you Russ. But this selector is not working. Iframe is specified using Id property:

image

The result is following:

I would try this xpath:

//cc-dropdown-content[contains(@class, ‘ open’)]/cc-color-picker

A couple of additional notes:

1.) Try testing custom xpaths in your inspector before going through the trouble of creating a Test Object. Enter the following into the “Console” tab of the inspector, and see what it returns:

$x(“//cc-dropdown-content[contains(@class, ‘ open’)]/cc-color-picker”)

2.) For Test Objects using xpaths, make sure you have the Selection Method set to “Attributes”, and for the path choose Name = xpath, Condition = equals, and set the Value to the above xpath. Also ensure that the “Detect object by” checkbox is checked for your xpath, and unchecked for any other rows.

3.) Since this element exists within an iframe, I would also try manually switching to the frame before trying to locate your element. You would need a separate test object that identifies the frame, then use the WebUI.switchToFrame() method.

1 Like

Looks like rewriting test objects with “handmade” locators made the situation more stable. Thanks guys! :sparkles: