The following way of selecting a mat-option fails:
No element found using locator: by.cssContainingText("mat-option",
"København K")
element(by.id('area')).element(by.cssContainingText('mat-option', 'København K')).click();
here is the HTML:
<mat-select id="area" formControlName="area" placeholder="Working area">
<mat-option *ngFor="let area of areas" [value]="area">
{{ area }}
</mat-option>
I don´t see why it fails.
Try : element(by.id('area')).click().then(()=>{
element(by.cssContainingText("mat-option","København K")).click();
});
To my understanding, mat-options are generated dynamically and will be in scope during the click() event. So you have to "click" and then work with the options.
Hope it works (and not too late :-) ).
Try this:-
element(by.id('area')).click();
element(by.cssContainingText('mat-option .mat-option-text', 'København K')).click();
As per my understanding above code must be working. Enjoy Protractor Coding :-)
Related
<div class="slds-show" data-aura-rendered-by="10155:0">
<div class="footer" data-aura-rendered-by="10156:0">
<div class="slds-grid slds-grid--align-end slds-m-top--large" data-aura-rendered-by="10157:0">
<div class="slds-show" data-aura-rendered-by="10158:0">
<button class="slds-button slds-button--neutral slds-m-left--small" data-aura-rendered-by="10159:0">Cancel</button>
<button class="slds-button slds-button--neutral slds-m-left--small" data-aura-rendered-by="10161:0">Save & New</button>
<button class="slds-button slds-button--brand slds-m-left--small" data-aura-rendered-by="10163:0">Save</button>
</div>
</div>
</div>
This is part of page, on which I will have to click on Save button.
Button is not unique and I need to find it throu class attribute from first div (slds-show), or
Can somebody tell me, why this xpath is not finding this element?
//button[parent::div[#class='slds-show'][#class='slds-button slds-button--brand slds-m-left--small']]
I've also try with ancestor, text instead of class and results is the same. Element is not found via Firefox console
To click on Save button once finding it through class attribute from first div (slds-show) you can use a much simpler and effective xpath as follows :
//div[#class='slds-show']/button[#class='slds-button slds-button--brand slds-m-left--small']
Note : The class attribute slds-button--brand is unique for the Save button.
Try to update your expression as below:
//button[parent::div[#class='slds-show'] and #class='slds-button slds-button--brand slds-m-left--small']
Note that predicate [#class='slds-button slds-button--brand slds-m-left--small'] in your XPath intend to test #class value of parent div, but not target button
You can try the following xpaths.
//*[#class="slds-show"]/button[text()="Save"]
or
//*[class="slds-show"]/button[#class="slds-button slds-button--brand slds-m-left--small"]
An xpath can easily get too complex, you can also try something like this:
//button[text()='Cancel']
//button[text()='Save & New']
//button[text()='Save']
These will return the exact buttons you need. If you're looking for a specific ancestor, include it in your xpath:
//div[#class="slds-show"]//button[text()='Save & New']
I want to put a form in a popup.
I've found a solution but I'm looking for something cleaner.
I didn't find a way to poping-up an existing tag with swal.
So I created an hidden form in my template :
<div id="myHiddenForm"><form role="form">
<md-input class="email" md-type="email" md-label="Email" md-validate="true"
md-validate-error="invalid email">
<i md-prefix class="material-icons">account_circle</i>
</md-input>
<button type="submit" md-button>
<i class="left material-icons">done</i>Submit
</button>
</form></div>
Then I created the popup with it's innerHTML.
swal({
html: document.getElementById('myHiddenForm').innerHTML,
showConfirmButton: false,
}).catch(swal.noop);
Then I can attach a callback to the submit button and this works finally.
Obviously, I can't use md-value.bind because the displayed form is a copy of the original.
I can access the input's value, using document.querySelectorAll('#myHiddenForm .email input')[0].value but I'm wondering if there's a better way to do this ?
Maybe there's a nice approach to combine aurelia-materialize-bridge and sweetalert2.
I know there's a modal component but it's not capable of keeping the focus inside the modal popup ; plus I already use swal2 everywhere else in this webapp because, you know, it is so sweet.
After a lot of tests and the full reading of the sweetalert2 documentation, I found the correct way to handle this. We simply need to move the <form> node.
swal({
html: '<span></span>'
, showCloseButton: true
, showConfirmButton: false
, onBeforeOpen: dom => swal.getContent()
.appendChild(document.querySelectorAll('#myHiddenForm form'))
, onClose: dom => document.getElementById('myHiddenForm')
.appendChild(swal.getContent().querySelectorAll('form'))
}).catch(swal.noop);
It's perfect to use with aurelia because it preserve everything (monitors, events, validation...).
We don't even need to manually bind the submit button like I did, We can use aurelia's usual way.
Conclusion: RTFM !
I tired a lot to get the xpath of the div which displays as "カーク商品掲載カタログ Online" on screen, but I'm not able to. The application is made using ZK framework hence it has random ID's.
<td z.type="Lic" id="z_mk_qr1" class="activeCatalogVersionTreeItem z-list-cell" z.zcls="z-list-cell" onmouseout="dragHoverClick( $e('z_mk_qr1'), event, true, null, 0);" onmouseover="dragHoverClick( $e('z_mk_qr1'), event, false, 'PerspectiveDND', 500);">
<div id="z_mk_qr1!cave" class="z-list-cell-cnt z-overflow-hidden">カーク商品掲載カタログ Online
<span id="z_mk_rr1" class="catalog-mnemonic-label z-label" z.zcls="z-label"> (STO-O)
</span>
</div>
</td>
I thought the xpath should be something like //div[contains(text(),'カーク商品掲載カタログ Online')], but it doesn't work.
Thanks!
Try the below cssSelector to identify the required element.
td.activeCatalogVersionTreeItem div.z-list-cell-cnt
You may use partial text match in this case as follows:
//div[contains(text(), 'Online')]
Check the link below for more:
https://sqa.stackexchange.com/questions/10342/how-to-find-element-using-contains-in-xpath
This is my source code :
<div class="emph a-center addCard"
Or
<a class="add-link" href="javascript:;" onclick="gotoPaymentAddressForm()">Add a New Credit Card</a
</div>
I need to click "Add New Credit" card which open form on the same page. Unable to do this using Selenium.
Kindly advice.
Try with following:
driver.findElement(By.linkText("Add a New Credit Card")).click();
You can also use following xpath codes:
driver.findElement(By.xpath("//a[#onclick='gotoPaymentAddressForm()']")).click();
or
driver.findElement(By.xpath("//a[contains(text(),'Add a New Credit Card')]")).click();
CSS selector is faster than XPATH so you can try
driver.findElement(By.cssSelector("a.add-link")).click();
Can someone please explain to me why Selenium webdriver can't be find by name=userid?
<input class="required" type="text" size="15" maxlength="64" **name="userid"**
value="" style="background-color: rgb(255, 255, 255);">
My code:
driver.findElement(By.name("userid")).sendKeys(prop.getProperty("userName"));
Error:
Unable to locate element: {"method":"name","selector":"userid"}
Yes, in my application there are frames involved and I didn't include switching to main as elements are in main frame.
To resolve this, I have simply add "driver.switchTo().frame("main");" before searching the element.
My final code are as below
driver.switchTo().frame("main");
driver.findElement(By.name("userid")).sendKeys(userName);
Hope my answer helps for those who are same on new (Webdriver boat) :)
try below line of code and let me know:
driver.findElement(By.xpath("//input[contains(#name,'userid')]")).sendKeys(prop.getProperty("userName"));