Currently i need to search a text and select the expected result from the search list.Search result displays with li tag and the text resides under span tag. Searching text will be like this Phone,Phone-audio,Phone-video .My source code is displaying like below..Please help me to select either Phone-audio or Phone-video.
<ul>
<li class="Searchitem"></li>
<span value="AL">Phone</span>
<li class="Searchitem"></li>
<span value="AL">Phone</span>-audio
<li class="Searchitem"></li>
<span value="AL">Phone</span>-video
</ul>
That html doesn't make any sense, and definitely isn't per standard. Neither the span nor the -audio or -video are inside the li tags. I'm not even sure what element you need to click.
If it was html was compliant it would be as easy as:
browser.span(text: 'Phone-video').when_present.click
or maybe this would work, depending on the rest of the site's html, but it would be very flaky if anything changed:
browser.ul.span(index: 1).when_present.click
Related
Using: AngularJS v1.3.15
Disclaimer: I know virtually nothing about angularjs. But I'm "forced" to use it because its being used in a framework that I am using.
I want to modify some html/angularjs that looks like this:
<ul>
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button" href="{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
I can see what is going on here... ng-repeat causes an iteration on the elements of the model.externalProviders collection/array. It works fine, but I have no control over content/styling individual <a> elements depending on the provider. I would like to change the content/appearance of the <a> element depending on type.
The relevant part of the model looks like this:
"externalProviders": [
{
"type": "Google",
"text": "Sign-in with Google",
"href": "https://localhost:44302/external?provider=Google&signin=04e029cf1018403f1757b097fbfb1ecb"
}
],
So I thought maybe there is a way to "select" or "pick" from externalProviders by type... If that type exists, then render the appropriate markup, e.g.:
<ul>
<!-- if model.externalProviders has item with type=="Google"... -->
<li>
<a class="pure-button button.google" href="<i class="fab fa-google"></i>{{provider.href}}">{{provider.text}}</a>
</li>
<!-- if model.externalProviders has item with type=="Facebook"... -->
<li>
<a class="pure-button button.facebook" href="<i class="fab fa-facebook"></i>{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
Not sure what the proper search terms would be so I had trouble finding any info that might solve my problem. Is something like this possible with AngularJS? If so, how would I accomplish it?
As #Major Sam commented, the ngClass might work for less simple scenarios, but I don't even need to go that far. Luckily I have control over the type property and the css, so I can make my type and css selector match the font awesome icon class selector for the icon. This works:
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button button-{{provider.type}}" href="{{provider.href}}"><i class="fab fa-{{provider.type}}"></i>{{provider.text}}</a>
</li>
Drawbacks: Doesn't allow you to change the actual markup (like, e.g., not include the icon if font awesome didn't have one for that provider).
I have created an uib-accordion in my angular project, where all the uib-accordion-group elements have been created under ng-repeat(for efficiency ofcourse).
<uib-accordion close-others="oneAtATime">
<ul ng-model="some_code">
<li ng-repeat="some_code">
<div uib-accordion-group heading="{{some_code}}">
{{some_code}}
</div>
</li>
</ul>
</uib-accordion>
The problem is I want to insert different and dynamic content in the uib-accordion-group(s) but being in ng-repeat I can't use template-url. I have almost 6 rows to be displayed. Should I fall back to developing each accordion row individually(which would increase code size, hence I don't want) or do we have any such provision in uib-accordion (which maybe I am currently not aware of)?
Suggestions please.
try to use ng-class and change the styles dynamically
The html code you want to put in each accordion. Are you getting it dynamically or you have the code you just want to put different code on different condition.
I am building a tiny single-page-application using Angular for the functionality and mdl for the design. I wanted to have a dropdown select box and since mdl doesn't provide this out of the box I built one using mdl-menu. The problem is now that Angular seems to have troubles evaluating expressions I put inside this menu, maybe because the menu is only opened when you click the button? I tried using expressions within the list items and this gives the expression output but also the original expression, which I obviously don't want. I also tried to ng-repeat the list items and then they just don't show up.
<button id="demo-menu-lower-left"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
<li class="mdl-menu__item">{{5+5}}</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
Result pic (Look at the evaluation in the top left, but the original expression is the actual "clickable" action)
Thx in advance!
MDL's javascript (denoted by the mdl-js CSS classes) will probably fool around with the HTML before Angular can do anything, eventually creating HTML that gives strange results when 'parsed' by Angular. It would be best to ensure your HTML gets processed in a strict order: Angular first, MDL second.
If you need to work with the HTML after the initial loading and rendering of the page, it would help to inspect the HTML in the browser instead of relying on the source HTML. Any javascript code (including Angular) will have to work with this and not the HTML represented by the source.
In a test case I would like to compare the text of an anchor with an expected one, but the anchor also contains i tags. Does anybody have a hint on how to do it?
E.g. (how to get the name of the selected language):
<a class="dropdown-button btn" href="#" data-activates="languageDropdown">
<i class="material-icons">language</i>
{{selectedLanguage.name}}
<i class="material-icons">arrow_drop_down</i>
</a>
In this case, select it by Angular binding, and then you can forget about the DOM entirely:
expect(element(by.binding('selectedLanguage.name')).getText()).toBe('Expected Language');
I really like the by.binding() approach presented by #SkinnyJ. Alternatively options:
element(by.css('a.dropdown-button'))
element(by.css('a[data-activates=languageDropdown]'))
I have to select an element from the auto-complete list.The item has no id and no name.
The following are the details of the inspected element:
<div class="abc-suggestion">
<p class="" style="white-space: normal;">
XYZ
<span class="pull-right"/>
The css selector
.abc-suggestion takes me to
<div class="abc-suggestion">
and
.tt-suggestion>p to
<p class="" style="white-space: normal;">
How can I select the element from the auto-complete list 'XYZ'
(I required to select an element for automating the application using selenium webdriver)
I had a similar problem in Selenium if I understand your question but I don't want to guess. Can you please show the exact html markup for the <div class="abc-suggestion"> and be clear in what you're trying to select within it?
Here's my understanding of your question:
You want to select just the text "XYZ" and you say it has NO id and NO name, but yet, I see "XYZ" wrapped in a P tag. Furthermore, where does the P tag closes?
Please be clear, I think I know what your problem is, it's a simple fix if you show the whole html snippet FOR the <div class="abc-suggestion"> and where that div closes; again just the html code for that div only and what you're tying to select within it should be enough for me or someone else to help you.
EDIT:
Try this:
List<WebElement> paragraphList=null;
paragraphList=driver.findElements(By.cssSelector("span.tt-suggestions p"));
String abcText=paragraphList.get(0).getText();
String xyzText=paragraphList.get(1).getText();