I used get text/get value with the xpath element, but it's not getting the text/value.
Below are the Code and tried to get text/value and getting element not visible error.
Note : Same element is working For click element.
<div class="cal-month-day cal-day-inmonth cal-day-future cal-day-has-events" ng-class="{
'cal-day-outmonth': !day.inMonth,
'cal-day-inmonth': day.inMonth,
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-future': day.isFuture,
'cal-day-has-events': day.events.length > 0,
'cal-day-selected': vm.calendarCtrl.isSelectedDate(day),
'cal-day-open': dayIndex === vm.openDayIndex
}" ng-click="vm.calendarCtrl.onDateSelection(day.date)">
<small class="cal-events-num badge badge-important pull-left ng-binding" ng-show="day.badgeTotal > 0 && (vm.calendarConfig.displayAllMonthEvents || day.inMonth)" ng-bind="day.badgeTotal">2</small>
<span class="pull-right ng-binding" ng-bind="day.label">2</span>
Related
I have this div that will make a calendar, the v-for renders days depending of the month.
Also, there are dynamic classes binded by the :class="classesDay(day)".
One of that classes is ".selectable_dates" and it shows only when I click on any day of the month, and it will have the next 5 days as selectable_dates.
<div class="days_grid">
<div
v-for="(day, idx) in cal.monthDaysList"
:key="idx"
class="days_grid_item"
:class="classesDay(day)"
#click="selectDates(day)"
>
<div class="days_grid_item_inside" :class="classesDayInside(day)">
<p>
{{ day && day.date }}
</p>
</div>
<div class="days_grid_item_bg"></div>
</div>
</div>
in CSS I have this:
.days_grid > .selectable_dates:first-child {
color: red;
}
But that :first-child selector doesn't make anything, if I put just .days_grid > .selectable_dates, it will show all the texts in red, but I just need the first child to be in red.
I don't know if it is because that class is dynamic or what, but I can't make it work.
The code that put the classes dynamically is below:
classesDay(day) {
return {
selectable_dates:
this.fromDate !== null &&
this.toDate === null &&
day.Date >= this.fromDate.Date &&
day.Date <= this.maxDate,
};
I've following line of code for displaying a message in modal based on the modal type -
<div class="modal-body">
<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
,'fa-question-circle text-warning': (type == confirm), 'fa-info-circle text-info': (type == info)}">{{message}}</span>
</div>
Issue is that, i don't see proper text color for alert message with above conditions and its rendered as white.
In browser console I don't see 'text-warning' being rendered. But I do see the place where text color is set to white which is shown below.
However, if i change above condition to following -
<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
, 'fa-info-circle text-info': (type == info)}">{{message}}</span>
I see 'text-warning' css getting applied properly as shown below.
Here CSS overriding doesn't happen.
EDIT-1 :
.sb-alert-icon has following code -
.sb-alert-icon{
font-size: medium;
padding-right: 10px;
}
Not sure, if this is happening because -
using 'text-warning' css consecutively for both 'Alert' & 'Confirm' scenarios.
using both Font Awesome and bootstrap together.
<span class="fa sb-alert-icon"
[ngClass]="{
'fa-exclamation-circle text-danger': type == error,
'fa-exclamation-triangle': type == alert,
'fa-info-circle text-info': type == info,
'fa-question-circle': type == confirm,
'text-warning': type == alert || type == confirm
}">
{{ type }} - {{ message }}
</span>
HTML:
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject">Subject length must be at least 3</span>
</div>
Generated by Angular HTML
<div class="validation-summary-errors text-danger">
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required</span>
<span ng-show="Mail.To.$error.required && !Mail.To.$pristine" class="">To field is required 2</span>
<span ng-show="Mail.Subject.$error.required && !Mail.Subject.$pristine" class="ng-hide">Subject field is required</span>
<span ng-show="Mail.Subject.$error.minlength && !Mail.Subject.$pristine && !focusSubject" class="ng-hide">Subject length must be at least 3</span>
</div>
CSS:
.validation-summary-errors > span:not(.ng-hide):last-child {
display: block;
margin-bottom: 20px;
}
Problem:
This CSS select span which no have ng-hide class AND is last child at the same time.
Need:
Select span which no have ng-hide class and last child among them, i.e. only second span.
Only CSS please or another way show some block errors with padding if errors is exists.
As mentioned in comments, that's pretty tough to pull off with just CSS. As an alternative to what you are trying to do, you could attempt to come at it the other way around, by selecting the first element with the class of ng-hide, which is easier because of the way that selectors can only select forwards of elements:
.validation-summary-errors > :not(.ng-hide) + .ng-hide
would select the element immediately after the element you are trying to select now, which means you can sort of flip your styles around.. use margin-top on it instead of margin-bottom on the one previous, etc.
This may not give you exactly what you want, depending on how exactly you are trying to style your elements, but it might work.
I am trying to click a button using Selenium.
Below is the code
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text"> … </span>
</button>
I tried to do this by the css selector:
clickbutton=driver.find_element_by_css_selector("button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only")
**My error: Unable to locate element: { method: "css selector","selector":"button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only"} **
Am I approaching this wrong? Im not understanding the error. Shoud I use another Locator?
Your css selector is ok the problem is related to html code which setting aria-disabled="false" for compability. For Web3 documentation it means that related element and descandent are active but in your case it is not working.
Simple you can set the aria-disabled="true" then you can interact with the button but even you set it back to false it still works. To change the button attribute, you can use execute_script. Alternative to your css you use this css too: .ui-dialog-buttonset > button
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'false'
>>> dr.execute_script('document.querySelector(".ui-dialog-buttonset > button").setAttribute("aria-disabled", true)')
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").get_attribute("aria-disabled")
u'true'
>>> dr.find_element_by_css_selector(".ui-dialog-buttonset > button").click()
I am using protractor for angular js automation. I am trying to get the 'fa fa-something' text from the below element structure using css identifier-
<div class="Itemlistcontainer">
<ul class="itemlist sortlist ui-sortable">
<!-- ngRepeat: Item in Items | orderBy:CustomSort:false --><li ng-repeat=" Item in Items | orderBy:CustomSort:false" ng-show="!searchinput || ([Item.Name]|filter:searchinput).length" ng-class="{ 'itemdisabled' : !CanUseTask(Item) || deactivate }" class="ng-scope ui-draggable">
<div bo-attr="" bo-attr-id="Item.Id" bo-attr-title="Item.Details | html2string" class="label itemlabel" id="3d991564-a1a9-49ab-8659-a26e00fbfae6" title="Blah blah blah.">
<span>
<i ng-class="itemIconClass(Item)" style="margin-right: 5px;" class="fa fa-something"></i>
</span><span bo-text="item.Name | ellipse : 32">Item Name</span>
</div>
<!--ngRepeat: Item in Items....and the list goes on
I need to know under what Item in Items was this 'fa fa-something' found. I am using element(By.css('ul.itemlist i.itemIconClass(Item)').getAttribute('class').getText()
which is not working.
element(By.css('ul.itemlist i.itemIconClass(Item)').getAttribute('class').getText()
can't work as you're trying to interpolate an angular template expression in a protractor element selector
I think you need :
element(By.css('ul.itemlist i.fa.fa-something').getAttribute('class').getText()
And to determine what Item in Items was this 'fa fa-something' found maybe you need an ID (which will be easier to read, no need to parse class attribute by extracting fa fasomething etc...