<td id="ext-gen383" class="x-toolbar-cell">
<table id="ext-comp-1144" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class=" x-unselectable" unselectable="on">
**<button id="ext-gen384" class="x-btn-text x-tbar-page-last" type="button">** </button>
</em>
I tried to click the button. Please see the html above. Tried so many ways.
eg:
//*[contains(#class,'x-btn-text x-tbar-page-last')] or
//button[contains(#class,'x-btn-text x-tbar-page-last')]
But still not working.
I'm guessing that only the number at the end is generated. Try:
By.cssSelector("em.x-unselectable > button[id^='ext-gen']")
Also, looking at that <em>, are you sure that that class isn't making the button NOT clickable? By the name, it looks like it disables clicks.
Its hard to tell without seeing the full html of the page. Since ExtJS generates random ids, there really are not any good properties to use for finding the element.
I would recommend just using an XPath, and then use an index (if your page has multiple button elements):
//button[1]
And adjust the index accordingly until you get the correct button to click.
Likewise, you could use the WebDriver API for driver.findElements, which will return a collection of all matching items, and then you could apply the index to that collection to get the correct button.
Related
Basically I'm creating a bootstrap table in my react project and am using an accordion toggle to contain the excess info in a dropdown. As of now when i click the dropdown all of the dropdowns open, so i'm trying to set the data-target attribute (currently set to #demo1) and the id attribute to change dynamically in order to give me better control over which drop down is open and when.
I'm using React and bootstrap and am still fairly new :S
I tried setting data-target to a unique ID {item._id} which is the same as the key, but nothing happens i presume it's because i don't have the # in front of it, but it would error out if i add it to the front of the expression.
<tr
key={item._id}
className="accordion-toggle"
data-toggle="collapse"
data-target="#demo1"
>
{...}
</tr>
<tr>
<td colSpan="6" className="hiddenRow">
<div className="accordion-body collapse" id="demo1">
<table className="table table-dark">
</table>
</div>
</td>
</tr>
I would probably do this by tracking the state of all Dropdowns (open vs closed) in the parent component in an array, and passing it to the child component as a boolean prop such as 'isOpen'.
If there is more to it, perhaps you can attach a screenshot of what you are trying to do?
For an Angular 1.2 project, I'd like to render a subset of <td>s inside of a table row using ng-bind-html in order to reduce the number of watchers. I cannot easily render all <td>s this way because some of them have ng-clicks, ng-if's and ng-classes attached to them.
Currently the ng-bind-html element is rendered as td children elements of the <td> that it's called in. However, ng-bind-html cannot be called as an element (must be an attribute).
Any ideas on how to approach this? (I've been looking at some jquery but I'm pretty new to that area).
<tr>
<td><span>{{entry.name}}</span></td>
<td ng-bind-html="generateStaticHtmlColumns(entry.data)"></td>
<td>{{entry.address | number}}</td>
<td ng-if='!entry.loading' tooltip position="bottom">{{entry.phone | number}}</td>
</tr>
Essentially, I'd like the <td> calling using ng-bind-html to be replaced with the "td"s it's returning rather than appending them as children.
I am displaying Errors on my Html page using Angular JS. The problem is I am receiving only error codes from the HTML . What are the various ways in which i can change the error code to the the Error text i like
<table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg"> {{item.message}}</td></tr>
</table>
If my item.message has one . I would like to display Beginner ,if its 2 Intermediate like that and so on . Should i use ng-if ? should i use ng-switch or should i input some logic on the controller side .
Should i use ng-if ?
ng-switch is more readable and hence a better option. Later when you look back at the code it will be intuitive to you and other developers about what this code does.
should i input some logic on the controller side .
Why put a logic in controller-side if the framework already provides a solution for such use-case?
I would do it like:
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch="item.message" align="left" class="validationMsg">
<span ng-switch-when="1">Beginner</span>
<span ng-switch-when="2">Intermediate</span>
<!-- and so on.. -->
</td>
</tr>
</table>
I say use a switch statement inside of your controller.
So depending on the value, the global message would change thus displaying the correct one when triggering the validation msg box to show.
I've faced following issue:
I have a <table>, where <tr>'s a generated via ng-repeat, and each <tr> contains several <input> elements. Smth like this:
<table>
<tr ng-repeat="plan in plans">
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field1" ng-blur="updateRow(plan)">
</td>
<td>
<input ng-pattern="/^\d+((\.|\,)\d+)?$/" ng-model="plan.field2" ng-blur="updateRow(plan)">
</td>
</tr>
</table>
When user finishes editing input I want to update full row. But I want to do it only if this input is valid. I mean I want to execute updateRow(plan) only if this condition ng-pattern="/^\d+((\.|\,)\d+)?$/" is satisfied. Or maybe somehow check it within updateRow(). But I can't find a way to do it without forms.
1)Is there a way to do it? Or may be there is better way to implement my idea?
2)And also is there way to bind ng-blur to each input in a row? Because I have about 20 inputs in a row and it looks bad when there is such amount of repeating.
Thanks to everybody in advance!
So I solved the first question by using forms and ng-form. I put every tr element in separate tbody and applied ng-form to each tbody element.
So i believe that I have to use forms if I need validation.
Basically I am attempting to do is allow the user to choose to show dollar formatting or not. Easy enough, just use ng-class to toggle the class, right? Except that now in empty cells a dollar sign shows.
What about if we use a custom filter? Well, I don't really know a way to toggle the custom filter on or off.
Any suggestions would be helpful.
Here is the button that toggles the formatting (it runs a function that sets format to true or false).
<button class="btn format-toggle" ng-click="setFormat();">Show <span ng-show="format">Hours</span><span ng-hide="format">Dollars</span></button>
The code that I'm trying to affect
<table>
<tr ng-repeat="project in projects">
<td>{{project.name}}</td>
<td ng-repeat="month in project.months" ng-class="{dollar : format}">{{month.total}}</td>
</tr>
</table>
I actually answered my own question but I suppose I'll leave it up in case someone else finds it useful.
I ended up just using ng-class along with another condition to check that there was a value in the cell.
<td ng-repeat="month in project.months" ng-class="{dollar : format && month !== undefined}">{{month.total}}</td>
CSS:
.dollar:before{
content:'$';
}