I have this Angular code which is using the same button id 3 times: barcodeScanner.button
<mobileweb-rowify _ngcontent-svn-c50="" class="full-height-right-separator" fxflex="auto" _nghost-svn-c4="" style="flex: 1 1 auto; box-sizing: border-box;">
<!---->
<div _ngcontent-svn-c4="" fxlayout="column" class="full-height-right-separator" id="rowify" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-width: 100%;">
<mobileweb-value-input _ngcontent-svn-c50="" class="compact-xs" id="pick-slip" _nghost-svn-c6="">
<!---->
<mobileweb-columnify _ngcontent-svn-c6="" _nghost-svn-c5="">
<!---->
<div _ngcontent-svn-c5="" fxlayout="row" class="compact-xs" id="pick-slip.form-input.columnify" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-height: 100%;">
<!---->
<mobileweb-action-button _ngcontent-svn-c6="" button.flex="56px" button.image="fas fa-barcode fa-2x" class="compact-right-margin-half ng-star-inserted" fxlayout="row" fxlayoutalign="start end" id="barcodeScanner" _nghost-svn-c10="" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-end flex-start; align-items: flex-end;">
<!----><!----><!---->
<button _ngcontent-svn-c10="" mat-button="" mat-flat-button="" class="mat-button mat-flat-button mat-primary ng-star-inserted selector" id="barcodeScanner.button" style="flex: 1 1 56px; box-sizing: border-box; max-width: 56px; min-width: 56px;">
<span class="mat-button-wrapper">
<!----><!----><!----><i _ngcontent-svn-c10="" id="barcodeScanner.button.icon" class="fas fa-barcode fa-2x ng-star-inserted"></i><!---->
</span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
</mobileweb-action-button>
<!---->
<mobileweb-rowify _ngcontent-svn-c6="" fxflex="auto" _nghost-svn-c4="" class="ng-star-inserted" style="flex: 1 1 auto; box-sizing: border-box;">
<!---->
<div _ngcontent-svn-c4="" fxlayout="column" id="rowify" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-width: 100%;">
<mat-label _ngcontent-svn-c6="" class="compact-xs" id="pick-slip.label">Pick Slip:</mat-label>
<mat-form-field _ngcontent-svn-c6="" class="mat-form-field ng-tns-c11-58 mat-primary compact indent mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float ng-pristine ng-valid ng-star-inserted ng-touched" id="pick-slip.formfield">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<!----><!---->
<div class="mat-form-field-infix">
<!----><input _ngcontent-svn-c6="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-star-inserted ng-touched" matinput="" type="text" id="pick-slip.input" placeholder="Enter Pick Slip" aria-invalid="false" aria-required="false"><!---->
<span class="mat-form-field-label-wrapper">
<!---->
</span>
</div>
<!---->
</div>
<!---->
<div class="mat-form-field-underline ng-tns-c11-58 ng-star-inserted"><span class="mat-form-field-ripple"></span></div>
<div class="mat-form-field-subscript-wrapper">
<!----><!---->
<div class="mat-form-field-hint-wrapper ng-tns-c11-58 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer"></div>
</div>
</div>
</div>
</mat-form-field>
</div>
</mobileweb-rowify>
<!---->
</div>
</mobileweb-columnify>
<!---->
</mobileweb-value-input>
<mobileweb-value-input _ngcontent-svn-c50="" class="compact-xs" id="shipment" _nghost-svn-c6="">
<!---->
<mobileweb-columnify _ngcontent-svn-c6="" _nghost-svn-c5="">
<!---->
<div _ngcontent-svn-c5="" fxlayout="row" class="compact-xs" id="shipment.form-input.columnify" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-height: 100%;">
<!---->
<mobileweb-action-button _ngcontent-svn-c6="" button.flex="56px" button.image="fas fa-barcode fa-2x" class="compact-right-margin-half ng-star-inserted" fxlayout="row" fxlayoutalign="start end" id="barcodeScanner" _nghost-svn-c10="" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-end flex-start; align-items: flex-end;">
<!----><!----><!---->
<button _ngcontent-svn-c10="" mat-button="" mat-flat-button="" class="mat-button mat-flat-button mat-primary ng-star-inserted selector" id="barcodeScanner.button" style="flex: 1 1 56px; box-sizing: border-box; max-width: 56px; min-width: 56px;">
<span class="mat-button-wrapper">
<!----><!----><!----><i _ngcontent-svn-c10="" id="barcodeScanner.button.icon" class="fas fa-barcode fa-2x ng-star-inserted"></i><!---->
</span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
</mobileweb-action-button>
<!---->
<mobileweb-rowify _ngcontent-svn-c6="" fxflex="auto" _nghost-svn-c4="" class="ng-star-inserted" style="flex: 1 1 auto; box-sizing: border-box;">
<!---->
<div _ngcontent-svn-c4="" fxlayout="column" id="rowify" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-width: 100%;">
<mat-label _ngcontent-svn-c6="" class="compact-xs" id="shipment.label">Shipment:</mat-label>
<mat-form-field _ngcontent-svn-c6="" class="mat-form-field ng-tns-c11-59 mat-primary compact indent mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float ng-untouched ng-pristine ng-valid ng-star-inserted" id="shipment.formfield">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<!----><!---->
<div class="mat-form-field-infix">
<!----><input _ngcontent-svn-c6="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-untouched ng-pristine ng-valid ng-star-inserted" matinput="" type="text" id="shipment.input" placeholder="Enter Shipment" aria-invalid="false" aria-required="false"><!---->
<span class="mat-form-field-label-wrapper">
<!---->
</span>
</div>
<!---->
</div>
<!---->
<div class="mat-form-field-underline ng-tns-c11-59 ng-star-inserted"><span class="mat-form-field-ripple"></span></div>
<div class="mat-form-field-subscript-wrapper">
<!----><!---->
<div class="mat-form-field-hint-wrapper ng-tns-c11-59 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer"></div>
</div>
</div>
</div>
</mat-form-field>
</div>
</mobileweb-rowify>
<!---->
</div>
</mobileweb-columnify>
<!---->
</mobileweb-value-input>
<mobileweb-value-input _ngcontent-svn-c50="" class="compact-xs" id="master-order" _nghost-svn-c6="">
<!---->
<mobileweb-columnify _ngcontent-svn-c6="" _nghost-svn-c5="">
<!---->
<div _ngcontent-svn-c5="" fxlayout="row" class="compact-xs" id="master-order.form-input.columnify" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-height: 100%;">
<!---->
<mobileweb-action-button _ngcontent-svn-c6="" button.flex="56px" button.image="fas fa-barcode fa-2x" class="compact-right-margin-half ng-star-inserted" fxlayout="row" fxlayoutalign="start end" id="barcodeScanner" _nghost-svn-c10="" style="flex-direction: row; box-sizing: border-box; display: flex; place-content: flex-end flex-start; align-items: flex-end;">
<!----><!----><!---->
<button _ngcontent-svn-c10="" mat-button="" mat-flat-button="" class="mat-button mat-flat-button mat-primary ng-star-inserted selector" id="barcodeScanner.button" style="flex: 1 1 56px; box-sizing: border-box; max-width: 56px; min-width: 56px;">
<span class="mat-button-wrapper">
<!----><!----><!----><i _ngcontent-svn-c10="" id="barcodeScanner.button.icon" class="fas fa-barcode fa-2x ng-star-inserted"></i><!---->
</span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
</mobileweb-action-button>
<!---->
<mobileweb-rowify _ngcontent-svn-c6="" fxflex="auto" _nghost-svn-c4="" class="ng-star-inserted" style="flex: 1 1 auto; box-sizing: border-box;">
<!---->
<div _ngcontent-svn-c4="" fxlayout="column" id="rowify" style="flex-direction: column; box-sizing: border-box; display: flex; place-content: stretch space-between; align-items: stretch; max-width: 100%;">
<mat-label _ngcontent-svn-c6="" class="compact-xs" id="master-order.label">Master Order:</mat-label>
<mat-form-field _ngcontent-svn-c6="" class="mat-form-field ng-tns-c11-60 mat-primary compact indent mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float ng-untouched ng-pristine ng-valid ng-star-inserted" id="master-order.formfield">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<!----><!---->
<div class="mat-form-field-infix">
<!----><input _ngcontent-svn-c6="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-untouched ng-pristine ng-valid ng-star-inserted" matinput="" type="text" id="master-order.input" placeholder="Enter Master Order" aria-invalid="false" aria-required="false"><!---->
<span class="mat-form-field-label-wrapper">
<!---->
</span>
</div>
<!---->
</div>
<!---->
<div class="mat-form-field-underline ng-tns-c11-60 ng-star-inserted"><span class="mat-form-field-ripple"></span></div>
<div class="mat-form-field-subscript-wrapper">
<!----><!---->
<div class="mat-form-field-hint-wrapper ng-tns-c11-60 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<!---->
<div class="mat-form-field-hint-spacer"></div>
</div>
</div>
</div>
</mat-form-field>
</div>
</mobileweb-rowify>
<!---->
</div>
</mobileweb-columnify>
<!---->
</mobileweb-value-input>
</div>
</mobileweb-rowify>
Is there some way to click on each of them using Selenium? The only way is to use full xpath. Is there also some other way?
Yo can select using xpath this way. Thanks
click_id = driver.find_elements_by_xpath('//*[#id="barcodeScanner.button"]')
click_id[0].click() # or [1],[2] meaning which one you need.
Try this:
List<WebElement> list = driver.findElements(By.xpath("//button[#id='barcodeScanner.button']"));
for (WebElement el : list ){
el.click();
}
Possibly you will have to add short delays between clicks in the loop to make them work properly.
Related
I have a problem with the dropdown that developer just upgraded the library AntD 3 to AntD 4. The dropdown list now displays 10 items. If user scrolls down, it will load next 10 items. The current code that I wrote for automation in Java with Selenium does not work. Does anybody help me to fix this case?
Below is the HTML code
<div class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft ant-select-dropdown-hidden" style="min-width: 455px; width: 455px; left: -484px; top: -571px;">
<div>
<div role="listbox" id="credential_type_list" style="height: 0px; width: 0px; overflow: hidden;">
<div aria-label="Financial" role="option" id="credential_type_list_1" aria-selected="false">1</div>
<div aria-label="KPI" role="option" id="credential_type_list_2" aria-selected="false">2</div>
<div aria-label="Royalty" role="option" id="credential_type_list_3" aria-selected="false">3</div>
</div>
<div class="rc-virtual-list" style="position: relative;">
<div class="rc-virtual-list-holder" style="max-height: 256px; overflow-y: hidden; overflow-anchor: none;">
<div style="height: 448px; position: relative; overflow: hidden;">
<div class="rc-virtual-list-holder-inner" style="display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;">
<div aria-selected="true" class="ant-select-item ant-select-item-option ant-select-item-option-selected" title="Revenue">
<div class="ant-select-item-option-content">Revenue</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Financial">
<div class="ant-select-item-option-content">Financial</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option ant-select-item-option-active" title="KPI">
<div class="ant-select-item-option-content">KPI</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Royalty">
<div class="ant-select-item-option-content">Royalty</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Marketing Fund">
<div class="ant-select-item-option-content">Marketing Fund</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="COGS Adjustments">
<div class="ant-select-item-option-content">COGS Adjustments</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Remittance">
<div class="ant-select-item-option-content">Remittance</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Payroll">
<div class="ant-select-item-option-content">Payroll</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Sales Tax (County)">
<div class="ant-select-item-option-content">Sales Tax (County)</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
<div aria-selected="false" class="ant-select-item ant-select-item-option" title="Sales Tax (State)">
<div class="ant-select-item-option-content">Sales Tax (State)</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true" style="user-select: none;"></span>
</div>
</div>
</div>
</div>
<div class="rc-virtual-list-scrollbar rc-virtual-list-scrollbar-show" style="width: 8px; top: 0px; bottom: 0px; right: 0px; position: absolute; display: none;">
<div class="rc-virtual-list-scrollbar-thumb" style="width: 100%; height: 128px; top: 0px; left: 0px; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 99px; cursor: pointer; user-select: none;"></div>
</div>
</div>
</div>
</div>
<div data-component-id="flexipage_reportChart8" data-aura-rendered-by="820:0" class="flexipageComponent" data-aura-class="flexipageComponent" xpath="1">
<article class="slds-card slds-card_boundary forceBaseCard flexipageCard flexipageReportChart" aria-describedby="header_923:0" data-aura-rendered-by="926:0" data-aura-class="forceBaseCard flexipageCard flexipageReportChart">
<div class="slds-card__header slds-grid" data-aura-rendered-by="146:1058;a">
<header class="slds-media slds-media--center slds-has-flexi-truncate" data-aura-rendered-by="148:1058;a">
<!--render facet: 150:1058;a-->
<div class="slds-media__body" data-aura-rendered-by="153:1058;a">
<h2 class="header-title-container" id="header_923:0" data-aura-rendered-by="154:1058;a"><span class="slds-card__header-title slds-truncate" title="More" data-aura-rendered-by="155:1058;a">More</span></h2></div>
</header>
<!--render facet: 157:1058;a-->
</div>
<div class="slds-card__body slds-card__body--inner" data-aura-rendered-by="928:0">
<div class="width_auto analyticsEmbeddedReportChart" data-aura-rendered-by="4:1058;a" data-aura-class="analyticsEmbeddedReportChart">
<!--render facet: 5:1058;a-->
<div class="outerbound" data-aura-rendered-by="10:1058;a">
<div class="chartContainer size_auto" data-aura-rendered-by="11:1058;a">
<!--render facet: 17:1058;a-->
<div class="autoWidth analyticsEmbeddedChart" style="height:300px;" data-aura-rendered-by="25:1058;a" data-aura-class="analyticsEmbeddedChart">
<div class="loadingMask hideLoading" data-aura-rendered-by="26:1058;a">
<div class="loadingPanel" data-aura-rendered-by="27:1058;a"></div><span class="loadingMsg" data-aura-rendered-by="28:1058;a">Loading report chart...</span></div>
<!--render facet: 30:1058;a-->
<!--render facet: 75:1058;a-->
<!--render facet: 82:1058;a-->
<!--render facet: 96:1058;a-->
<div class="eclair-component-container reportsEclairChart" data-aura-rendered-by="106:1058;a" data-aura-class="reportsEclairChart">
<div class="eclair-component-chart ng-cursor-default" data-aura-rendered-by="107:1058;a" data-ngname="chart_5" style="width: 380.844px;">
<div style="position: relative;">
<div style="z-index: 2; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 380.844px; height: 300px; left: 0px; top: 0px;" class="ps-container" data-ps-id="414c4b20-2e6b-f1a2-2116-7ff0144f88a4">
<div style="width: 381px; height: 300px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="chart" style="z-index: 1; position: absolute; -webkit-font-smoothing: antialiased; width: 380.844px; height: 300px; left: 0px; top: 0px;" width="571" height="450"></canvas>
<button aria-live="polite" class="reportsEclairChart ng-button assistiveText">Enable Tab Navigation for This Chart<span class="assistiveText">Enable table equivalent for screen reader users</span></button>
</div>
<div data-ngname="legend_chart_5" style="">
<div style="position: relative;">
<div class="ps-container" data-ps-id="1d1e50a4-a66a-2415-9d77-2a3c62481170" style="z-index: 3; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 124px; height: 88px; left: 254.844px; top: 2px;">
<div style="width: 124.88px; height: 86px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="legend" style="z-index: 2; position: absolute; -webkit-font-smoothing: antialiased; width: 124px; height: 88px; left: 254.844px; top: 2px;" width="186" height="132"></canvas>
</div>
</div>
<div class="ng-annotations-container" style="margin: 2px; width: 376.844px; height: 296px;"></div>
</div>
<div class="error-div hide" data-aura-rendered-by="108:1058;a"></div><span class="eclair-component-alt-text" data-aura-rendered-by="109:1058;a">Chart: Untitled</span></div>
<!--render facet: 111:1058;a-->
</div>
</div>
</div>
<DIV CLASS="LIGHTNING" DATA-AURA-RENDERED-BY="113:1058;A"><SPAN CLASS="REPORTFOOTER" DATA-AURA-RENDERED-BY="114:1058;A"><BUTTON CLASS="SLDS-BUTTON NAVIGATEBUTTON UIBUTTON" ARIA-LIVE="OFF" TYPE="BUTTON" DATA-AURA-RENDERED-BY="118:1058;A" DATA-AURA-CLASS="UIBUTTON"><!--RENDER FACET: 119:1058;A--><SPAN CLASS=" LABEL BBODY" DIR="LTR" DATA-AURA-RENDERED-BY="121:1058;A">VIEW REPORT</SPAN>
<!--render facet: 123:1058;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:1058;a"><span class="asOfDate" data-aura-rendered-by="128:1058;a">As of Yesterday at 10:15 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:1058;a" data-aura-class="uiButton">
<!--render facet: 138:1058;a--><span class="assistiveText" data-aura-rendered-by="141:1058;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="602" data-aura-rendered-by="135:1058;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
</div>
</div>
<div class="slds-card__footer" data-aura-rendered-by="930:0">
<!--render facet: 931:0-->
</div>
</article>
</div>
I am trying to find a dynamic xpath for a large section of code. When I pull the dynamic xpath from chropath, I receive a very large response, which is too large to include in the test
I've tried trimming the dynamic xpath pulled from chropath but cannot seem to do so. I have capitalized the section of the code that is relevant.
More
Loading report chart...
Enable Tab Navigation for This ChartEnable table equivalent for screen reader users
Chart: Untitled
<!--render facet: 111:1058;a-->
</div>
</div>
</div>
<DIV CLASS="LIGHTNING" DATA-AURA-RENDERED-BY="113:1058;A"><SPAN CLASS="REPORTFOOTER" DATA-AURA-RENDERED-BY="114:1058;A"><BUTTON CLASS="SLDS-BUTTON NAVIGATEBUTTON UIBUTTON" ARIA-LIVE="OFF" TYPE="BUTTON" DATA-AURA-RENDERED-BY="118:1058;A" DATA-AURA-CLASS="UIBUTTON"><!--RENDER FACET: 119:1058;A--><SPAN CLASS=" LABEL BBODY" DIR="LTR" DATA-AURA-RENDERED-BY="121:1058;A">VIEW REPORT</SPAN>
<!--render facet: 123:1058;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:1058;a"><span class="asOfDate" data-aura-rendered-by="128:1058;a">As of Yesterday at 10:15 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:1058;a" data-aura-class="uiButton">
<!--render facet: 138:1058;a--><span class="assistiveText" data-aura-rendered-by="141:1058;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="602" data-aura-rendered-by="135:1058;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>
</div>
</div>
<div class="slds-card__footer" data-aura-rendered-by="930:0">
<!--render facet: 931:0-->
</div>
</article>
I need a shorter dynamic xpath
Does this work?
//button[text() = 'VIEW REPORT' or text() = 'view report' or text() = 'View Report']
If there are multiple View Report links showing up in the page, you can choose an item like
(//button[text() = 'view report'])[1]
I tried to enter the value(search Engine) and select the option in combo box. Unable to enter and select option in combo box.
Tried with to click first using
js=(JavascriptExecutor)driver;
js.executeScript("$(\"#divProfileSetting li:nth-child(2) span\").click()");
Here is the HTML source,
<div class="controls" id="divSearchEngine">
<div class="k-widget k-multiselect k-header span12" unselectable="on" style="">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul role="listbox" unselectable="on" class="k-reset" id="searchEngine_taglist"></ul>
<input class="k-input k-readonly" style="width: 157px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="searchEngine_taglist searchEngine_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
<span class="k-icon k-loading k-loading-hidden"></span>
</div>
<select class="span12" id="searchEngine" multiple="multiple" name="searchEngine" data-role="multiselect" aria-disabled="false" aria-readonly="false" style="display: none;">
<option value="1:AF">Google Afghanistan</option>
<option value="1:AX">Google Åland</option>
<option value="1:AL">Google Albania</option>
</select>
<span style="font-family: CenturyRegular; font-size: 12px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 15.72px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;">Select Search Engine...</span>
</div>
</div>
js=(JavascriptExecutor)driver;
js.executeScript("$('#searchEngine-list ul li:eq(1)').click()");
js=null;
This code worked
My materialize DatePicker works only for the FirstTime
I am using Materialize for devloping a site which invloves date-picker. The date-picker works only for the first load of a page. When we select the date for second-time it comes and goes.
How to solve this type of problem? Any help is greately Appriciated. Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified JavaScript -->
<script type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
h5{
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: .5px;
color: #98AAB8;
margin-right: -.5px; font-weight:700; font-family: Neue Plak,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif;
}
input {
line-height: normal;
padding: 10px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
font-family: quick-sand, sans-serif;
font-size: 13px;
}
.input_field1{
line-height: normal;
padding: 12px 9px 12px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
font-family: quick-sand, sans-serif;
font-size: 13px;
margin-bottom: 20px;
}
.text_area{
padding:69px 280px;
}
.input_date{
line-height: normal;
padding: 13px 9px 10px 47px;
border-radius: 4px;
border: 1px solid #2F3B59;
background: #f9f9f9;
width:100%;
margin-bottom: 20px;
}
.form_header {
font-family: quick-sand, sans-serif;
font-size: 13px;
/* float: left; */
text-align: left;
margin-bottom: 10px;
font-weight: 500;
color:#666;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
position: absolute;
margin-top: 13px;
margin-left: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.posterImg{
text-align: center;
margin: 0px 0;
width: 164px;
height: 159px;
padding: 55px 2px 11px 5px;
border: 1px solid #2F3B59;
border-radius: 7px;
font-size: 12px;
color: #98AAB8;
margin-bottom: 20px;
}
.breadcrumb:before {
content: '\E5CC';
color: rgba(255,255,255,0.7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
color: #566985;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
/* color: #ffab40; */
color: #566985;}
textarea.materialize-textarea {
overflow-y: hidden;
border: none;
border: 1px solid #2F3B59;
padding: .8rem 0 1.6rem 0;
resize: none;
min-height: 3rem;
border-radius: 7px;
background: #f9f9f9;
}
input[type=text]:not(.browser-default){
background-color: transparent;
border: none;
/* border-bottom: 1px solid #9e9e9e; */
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 20px 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
</style>
<!-- Fav icon -->
</head>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper" style="background: #2F3B59;">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div style="height:30px; background:white;"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m10">
<nav style="border: 1px solid #eee;background: #F8FBFE; border-radius:5px;">
<div class="nav-wrapper">
<div class="col s12">
Add Listing
Add conference
Profile
Home
</div>
</div>
</nav>
</div>
<div class="col s12 m1"></div>
</div>
<div class="row">
<div class="col s12 m1"></div>
<div class="col s12 m3">
<div class="card sticky-action" style="border: 1px solid #eee;">
<div class="card-action">
<div class="card" style="background: #F8FBFE; border-radius:5px;border: 1px solid #eee;">
<div class="card-action">
Edit Profile
</div>
<div class="card-action">
Add event
</div>
<div class="card-action">
Added Events
</div>
<div class="card-action">
<a class="waves-effect waves-light btn-small" style="background: #4DB7FE; color: #566985;">Save</a>
</div>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
<div class="col s12 m7">
<h5 style="text-align:center;font-family: quick-sand, sans-serif;">Conference Details</h5>
<div class="row">
<div class="col s12">
<div class="form_header">Conference Link</div>
<i class="fa fa-link"></i><input type="" class="input_field1" placeholder="Conference Link" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Name</div>
<i class="fa fa-address-book"></i><input type="" class="input_field1" placeholder="Conference Name" autocomplete="off">
</div>
<div class="col s12 m12">
<div class="form_header">Conference URL</div>
<i class="fa fa-link"></i> <input type="" class="input_field1" placeholder="Conference URL">
</div>
<div class="col s12 m12">
<div class="form_header">Conference Registration URL</div>
<i class="fa fa-ticket"></i> <input type="" class="input_field1" placeholder="Conference Registration URL">
</div>
<div class="col s12 m6">
<div class="form_header">Conference Start Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker1" placeholder="yyy-mm-dd" onclick="jithendra()">
</div>
<div class="col s12 m6">
<div class="form_header">Conference End Date</div>
<i class="fa fa-calendar-check-o"></i><input type="" class="input_date" id="datepicker2" placeholder="yyy-mm-dd" onclick="jithendra1()">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter Handle</div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" placeholder="City">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m4">
</div>
<div class="col s12 m12">
<div class="form_header" style="margin-top:20px;">City</div>
<i class="fa fa-map-marker"></i> <input type="" class="input_field1" type="text" placeholder="City">
</div>
<div class="col s12 m12">
<div class="form_header">Venue</div>
<i class="fa fa-map-marker"></i><input type="" class="input_field1" type="text" placeholder="Venue">
</div>
<div class="col s12 m12">
<div class="form_header" style="width: 338px;">Keywords</div>
<input type="" class="input_field1" type="text" placeholder="Keywords">
</div>
<div class="col s12 m12">
<div class="form_header">Conference City</div>
<input type="file" class="input_field1" type="text" placeholder="Venue" style="opacity:0px;">
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee;margin-bottom:20px;margin-top: 21px;"></div>
</div>
<div class="col s12 m12">
<div style="height:10px;"></div>
</div>
<div class="col s12 m12">
<a class="waves-effect waves-light btn" style="background: #2F3B59;border-radius:5px;">Submmit</a>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<div class="col s12 m12">
<div style="border-bottom: 1px solid #eee; margin-top:30px;"></div>
</div>
<!-- <div class="col s12 m4">
<div class="form_header" >Poster Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div>
<div class="col s12 m3"></div>
<div class="col s12 m4">
<div class="form_header" >Card Image</div>
<div class="input" style="border:none;border: 1px solid #2F3B59;height: 180px;border-radius: 5px;background: #f9f9f9;/* padding-bottom: 16px; */">
<input type="text"></div>
<input type="file" class="input_field1" style="height: 180px;
opacity: -0.7;
position: absolute;
width: 146px;
margin-top: -180px;">
</div> -->
<!--
<div class="col s12 m12">
<hr>
</div>
<div class="col s12 m12">
<h5>My Socials</h5>
</div>
</div>
<div class="col s12 m12">
<div class="form_header">Facebook </div>
<i class="fa fa-facebook"></i><input type="" class="input_field1" type="text" placeholder="https://facebook.com/">
</div>
<div class="col s12 m12">
<div class="form_header">LinkedIn </div>
<i class="fa fa-linkedin"></i><input type="" class="input_field1" type="text" placeholder="Linkedin.com">
</div>
<div class="col s12 m12">
<div class="form_header">Twitter </div>
<i class="fa fa-twitter"></i><input type="" class="input_field1" type="text" placeholder="https://twitter.com/">
</div>
</div> -->
</div>
</div>
</div>
<footer class="page-footer" style="background: #2F3B59;">
<div class="container">
<div class="row">
<div class="col s12 m3">
<h5 class="white-text">KonfHub</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col s12 m3">
<h5 class="white-text">Link</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script>
function jithendra(){
$('.modal').modal();
$('#datepicker1').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
function jithendra1(){
$('#datepicker2').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
}
</script>
</body>
</html>
I changed a few things in your code. You were using both the versions of Materialize 1.0.0 and 0.100.2, no idea why you should use only one version and then I updated the jQuery methods as per the new version that is 1.0.0, you can check those on their website Picker - Materialize and Select - Materialize. You were using .input-date class but in order to use datepicker you've to use .datepicker class only, you can modify the CSS of .datepicker class. I added !important to the changes you've made to the .datepicker class, so you can have the modified CSS which you applied to .input-date. At last, you've given ids to individual datepickers, so you can either use the jQuery methods on ids or on class.
Codepen - Working Demo
i just learn to using gridster, and i want to create a card show general infomation and when user select expand the card, this wil change content and show full infomation off the product!
this is the card before click expand
<ul>
<li class="firm" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div style="width: 95%; height: 80%; float: left; margin: 5px" id="divMain_1">
<div id="headerCol" style="width: 100%; height: 15%">
<span id="quankul">asset under management</span>
</div>
<div id="totalCol" style="width: 100%; height: 25%">
<span class="bold secondDiv" style="font-size: 24px">$1.41 Billion</span> <span class="bold">
(total asset)</span>
</div>
<div class="secondDiv" style="width: 100%; height: 50%; float: left">
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span class="bold">Top 3 Plan</span>
</div>
<div style="float: left; width: 30%">
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>Seafood Gallery</span>
</div>
<div style="float: left; width: 30%">
<span>$100.000</span>
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>ACME Enterprise</span>
</div>
<div style="float: left; width: 30%">
<span>$200.000</span>
</div>
</div>
<div style="float: left; width: 100%">
<div style="float: left; width: 70%">
<span>Ashley Cleaning</span>
</div>
<div style="float: left; width: 30%">
<span>$300.000</span>
</div>
</div>
</div>
</div>
<div id="expand" style="width: 100%;padding-bottom:0px; float: right;text-align:right">
<span>Expand</span>
</div>
<div id="collapse" style="width: 100%;padding-bottom:10px;height:20%;text-align:right;display:none">
<span>Collapse</span>
</div>
</li>
and when i click "expand" this will show ful infomation about the product;
can you help me to do it!