Is there a way to highlight element with Watir? - html

I keep getting errors doing this:
puts browser.table(:after? => span(:text => "Asmeniniai duomenys") )[2][2].text
basically saying:
undefined method `span' for main:Object (NoMethodError)
or
undefined method `table' for main:Object (NoMethodError) etc...
so I decided that the table was not found. I tried if/else, but it's the first time I used ruby, I did not understand if it worked or not.
So I thought that the simplest way would be to find out how to highlight something.
Could anyone suggest how can I highlight elements or how to fix this problem?

I assume you mean to highlight the element so you can determine if the right element is being found.
You can use the Element#flash method. This method will change the background of the element a couple of times, which should help you figure out what element was found.
For example:
browser.table.flash

Related

Parent node in react-testing-library

The component that I have testing renders something this:
<div>Text<span>span text</span></div>
As it turns out for testing the only reliable text that I have is the 'span text' but I want to get the 'Text' part of the <div>. Using Jest and react-testing-library I can
await screen.findByText(spanText)
This returns an HTMLElement but it seems limited as I don't have any of the context around the element. For example HTML methods like parentNode and previousSibling return null or undefined. Ideally I would like to get the text content of the parent <div>. Any idea how I can do this with either Jest or react-testing-library?
A good solution for this is the closest function.
In description of closest function is written: Returns the first (starting at element) including ancestor that matches selectors, and null otherwise.
The solution would look like this:
screen.getByText("span text").closest("div")
Admittedly, Testing Library doesn't communicate clearly how to do this. It includes an eslint rule no-direct-node-access that says "Avoid direct Node access. Prefer using the methods from Testing Library". This gives the impression that TL exposes a method for a situation like this, but at the moment it does not.
It could be you don't want to use .closest(), either because your project enforces that eslint rule, or because it is not always a reliable selector. I've found two alternative ways to tackle a situation like you describe.
within():
If your element is inside another element that is selectable by a Testing Library method (like a footer or an element with unique text), you can use within() like:
within(screen.getByRole('footer')).getByText('Text');
find() within the element with a custom function:
screen.getAllByText('Text').find(div => div.innerHTML.includes('span text'));
Doesn't look the prettiest, but you can pass any JS function you want so it's very flexible and controllable.
Ps. if you use my second option depending on your TypeScript config you may need to make an undefined check before asserting on the element with Testing Library's expect(...).toBeDefined().
But I have used HTML methods a lot and there was no problem yet. What was your problem with HTML methods?
You can try this code.
const spanElement = screen.getElementByText('span text');
const parentDiv = spanElement.parentElement as HTMLElement;
within(parentDiv).getElementByText('...');

Polymer paper-card failed to construct CustomElement

I've got an application that seems to work fine when I put all my elements inside a <dom-bind> element. When I remove that dom-bind (no longer needed), most of the elements carry on working, but paper-card stops and throws an error:
"Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes"
The error is thrown from polymer/lib/legacy/lib/class.html if that helps. Anyone got any ideas?
I had the same error, and find out angular create an empty element (), then bind stuffs to it.
This fail according to spec:
4.13.2 Requirements for custom element constructors
The element must not gain any attributes or children
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
I fix my problem by assigning in connectedCallback()

Polymer remove parent

When trying to remove a the parent element I have been able to use this line for most cases:
Polymer.dom(Polymer.dom(this).node.domHost.parentNode).removeChild(Polymer.dom(this).node.domHost);
Yet in some cases I get this error:
Uncaught Error: The node to be removed is not a child of this node: [object HTMLElement]
I have verified the child is there and the objects look correct, but I think I am probably missing a Polymer.dom() somewhere?
I have been able to solve it for all cases that I need by doing this:
var thisNode = Polymer.dom(this).node;
Polymer.dom(Polymer.dom(thisNode.domHost).parentNode).removeChild(thisNode.domHost);

Unable to Access DIV element using Watir

Hi I am trying to access the DIV element using watir but I am unable to do that,I have tried in different ways but couldn't access it,may be I think it need to be access through some parent element can anyone help me out?
My system Configurations
IE-8
Windows 7
I tried with the below command
#ie.div(:text,'COMPOSE').click
the command gets execute with no errors but no action is performed on the UI
The best solution appears to be switching to Watir-Webdriver. With Watir-Webdriver, #ie.div(:text,'COMPOSE').click will work as expected.
Assuming that is not an option, there are a couple of reasons why that same command does not work with Watir(-Classic) v1.6.7:
The first problem is that #ie.div(:text,'COMPOSE').click will find the first div that contains this text. This would be one of the ancestors of the div you want. As a result, Watir will send the click event against the wrong element.
The second problem is that the div is not responding to the onclick event fired by Watir. I am not sure why this problem exists.
To solve the first problem, you will need to be more specific when locating the div. In this case, the "role" attribute can be used since none of the ancestor elements have this attribute. Watir-Classic does not support using the role attribute as a locator. As a result, you will need to create a custom locator using an element collection and the find method:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }
To solve the second problem, it turns out that double clicking does work. While newer versions of Watir-Classic have a double_click method implemented, it does not exist in 1.6.7. You can replicate the method by calling the fire_event method:
.fire_event('ondblclick')
Putting it all together, the following will click the compose button:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }.fire_event('ondblclick')
There may be more than one element on the page with the text 'COMPOSE', some may be hidden. Try:
#ie.divs(:text,'COMPOSE').size
That is divs with an s.
Then you can try something like the following and see if you get a change in the UI:
#ie.divs(:text,'COMPOSE').each { |b| b.fire_event('click') }
I remember that fire_event works better, but would recommend consulting the docs for the difference between .click and fire_event.

AS3 stage.addChild / stage.removeChild << Must be child of caller

If im usin function to add a mc to the stage like so:
var myChild:MC= new MC();
function somefunc()
{
stage.addChild(myMC)
}
but when I try to remove the mc by:
stage.removeChild(myMC)
I get The supplied DisplayObject must be a child of the caller error...
any suggestions or work arounds?
Your code should work if the item is on the stage. Perhaps qualifying it with a conditional statement like so:
if (myMC.stage != null)
stage.removeChild(myMC);
Alternatively you could use the following code but it is probably not best practice.
if (myMC.parent != null)
myMC.parent.removeChild(myMC);
The problem is not with removeChild. It's with the displaylist. If you check the parent property of the displayobject, when you call "removeChild" it will be null.
Why does it become null could be because of lots of reasons:
Parent is nulled before the child.
The child or parent have event listeners that won't let them die.
The Display Object is really not the instance you're trying to remove. THIS one can be very tricky to find out. Look at the "name and parent properties" of the variable you're trying to remove while calling removeChild.
You could try hiding and showing the movieClip, if possible.
I think its a bit faster than removing and adding consistantly, code permitting.
Keep in mind this is just a suggestion, someone smarter than me outta be able to help you out..
You could also use this fail safe:
if(myMC.parent) myMC.parent.removeChild(myMC);
I could fix this problem by simply removing every EventListeners I added to that object before removing it.