I have a GWT application for which I'm trying to write some tests using Selenium.
I'm using XPath to identify the elements on the page for the tests. Using id won't work as the id values are auto-generated by GWT and can change. Things started going well when I realised I could find buttons by their labels as follows:
//button[.='OK']
However, when I started running multiple tests I started having problems. I realised that the issue was all the different "pages" of the GWT app once generated by the Javascript remain in the HTML in hidden <div> elements. This meant my Selenium tests were sometimes clicking hidden buttons instead of the button visible in the current view.
Examining the HTML with Firebug, it seems that GWT hides the <div> elements by adding display: none to their style attribute. This means I can find all the hidden OK buttons as follows:
//div[contains(#style,'display: none')]//button[.='OK']
This will find all the hidden OK buttons, i.e the buttons which have an ancestor <div> which is hidden by having display: none in the style.
My question is: how do I use XPath to find only the visible OK buttons? How do I find the buttons which have no ancestor <div> elements with display: none in the style?
This should work:
.//button[.='OK' and not(ancestor::div[contains(#style,'display:none')])
and not(ancestor::div[contains(#style,'display: none')])]
EDIT:
The simpler and more efficient expression below:
//div[not(contains(#style,'display:none'))]//button[.='OK']
does not work properly because every button has at least one div that's visible in its ancestors.
Selenium 2 Webdriver gives us the option of the isDisplayed() method which deals with this problem. Nice work by the selenium contributors.
This works for me:
//div[not(#hidden)]
//div[(contains(#style,'display: block'))]//button[#id='buttonid']
This worked for me. Like 'display: none' representing hidden blocks, 'display: block' represents currently displayed block and we can specify any inner tags to be identified as above
For me this worked to eliminate hidden elements:
//div[#open]//*
I added this code to the namemapping editor and it did not find the Keep button once it came up. The system sees it in the editor but it doesn't want to click on the button whenever create a new test which will include this item.
Now one other thing this is a dynamic button click so what happens is I will select a button that opens up a to drop downs where I place these items inside those dropdowns. Now it works for the first item but fails to recognize the same mapped item for the next time it is used in another screen. The buttonKeep is the same in both areas.
//div[contains(#style,'display: block')]
This code will find visible element xpath
Related
I have created a component in my project that is purely an ion-slides UI component. I've injected into the main page of my side-drawer template app and I'm experiencing a number of issues/annoyances:
The content doesn't always center within the main pane. It seems as though the width of the individual ion-slide items all get set with an inline element style width that is greater than the pane width! I've realised that this only happens when the whole app is loaded. If I click on the side menu item of the page to reload it individually, the issue disappears. This leads me to believe it's an issue with the order that components are rendered. Can anyone help me understand what is happening? Is it a bug?
Undesired behaviour
I can't work out how to get navigation arrows to display/work - is this possible?
https://stackblitz.com/edit/angular-ionic4-test-yuppm1?embed=1&file=src/app/app.module.ts
The above Stackblitz should help to give you an idea of my setup but it doesn't show the problem I'm experiencing. It does show one other peculiarity though:
With loop set to true in the options, when you get to the last slide and you go to the next slide, it jumps to second element rather than the first! Any help on understanding why this is happening will be appreciated.
Thanks
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
When I use Hflex property in a included page in a MVVM approach, it doesn't work.
The problem happens when I include some page inside another, and this page has components whose sizes are controlled by hflex property. I already tried to force the rendering of the components using invalidate on parent window load, or Clients.resize(component) when it is created inside the viewmodel class, but with no success. It just happens in this case: pages included in a MVVM scenario.
Here is a way to see the error: http://zkfiddle.org/sample/3bj6e5j/9-Hflex-not-working-with-include-pages-inside-div#source-1.To see the problem, click in the "Open" label, then a combobox is shown. You can see that the size of the combobox is only updated after resizing the browser window or after clicking in the dropdown button
If I explicitly resize the browser window, then the components are correctly sized.
Could anyone give any idea on how to solve it?
It's actually the javascript who does the fault,
Let me explain more. First you set the src of the include correct.
This is before the javascript is called, and your div don't really have a width at that moment.
So it takes that size, what you see.
Then the javascript is called and and actually he show's the div, but with the rendered with of the include at that moment.
How can you fix it : use zUtl.fireSized.
Here is your working fiddle.
I am using tinyMCE in show block elements mode.
I have written custom plugin that inserts prepared html blocks (layout partials) in actual cursor position.
It's problematic to point a space between two divs.
If I have markup like that:
<div id="first"></div><div id="second"></div>
When I click beteween those divs I would land in first or second div, never between.
So I try to edit html source and result in markup whit br's:
<div id="first"></div><br/><div id="second"></div>
Now I can point between those divs, but it does not work with elements that I add dynamically via tinyMCE. If I add partial eg.
<div></div><br/>
clicking after that div is not posibble. But it's posibble when I edit source manually. Weird. Do you have any solution at this subject?
Tinymce takes care that the user is not able to click between div or p tags.
The reason for this is easy: If a user could click inbetween and he would type in a letter - then there would be another div or p created containing that letter. This is not the way rtes are designed to work. If you want to insert somthing between two divs you will need to use a special button or own plugin to take care of this, but placing the cursor where you won't it to be by hand won't work.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)