I'm trying to do test cases for my application on Laravel 6.0 with Dusk. I'm facing some difficulties in checkbox selection, it is not finding the 'check' element.
As per the documentation I have used the check method and defined the selector with id
My ID is : company-search-type-Investor and my code is:
$browser->scrollToElement('#company-search-type-Investor')
->assertNotChecked('#company-search-type-Investor')
->check('#company-search-type-Investor')
->pause(1000)
Its strange that my test with ->assertNotChecked('#company-search-type-Investor') gets passed but ->check('#company-search-type-Investor') gives an error:
Facebook\WebDriver\Exception\UnrecognizedExceptionException: element click intercepted: Element <input data-v-c1e51704="" id="company-search-type-Investor" type="checkbox"> is not clickable at point (192, 497). Other element would receive the click: <label data-v-c1e51704="" class="kt-checkbox" style="margin-bottom: 6px; font-size: 1.1rem;">...</label>
Any suggestions are welcomed. Thanks.
This could be happening because CSS is being applied that moves the checkbox behind the label. There are two ways to check the checkbox.
You can call click on the label:
$browser->click("label[data-v-c1e51704='']");
You can call sendKeys on the checkbox:
$browser->element("#company-search-type-Investor")->sendKeys(WebDriverKeys::SPACE)
Related
While selecting radio button inside laravel Dusk i am getting
Facebook\WebDriver\Exception\ElementNotInteractableException: element
not interactable
Here is my code
$browser->visit('/test')
->radio('question_outer_3', '29')
->assertTitleContains('Test');
This is my templete
<input type="radio" class="radio user_questions " name="question_outer_3" id="option29" value="29" data-question="11" data-option="29" data-scroll-to=" #question_outer_4 ">
Often elements are "not interactable" when are not in the viewport (e.g. you have to scroll to reach them, or are still to be appended in the DOM after a Javascript call).
Scrolling and waiting for text may help.
I need to know how to check a child element of a parent object
I am trying to check that a checkbox in my application is being deselected. All of my checkboxes have the same value in the code. My parent has a 100% unique name. I need to know if there is a way to check that the checkbox for my parent element is deselected without it just checking the first element with the checkbox code.
<div ng-repeat="k in model.keys" class="Filter__item ng-scope">
<a ng-click="toggleSentiment(k)" pt-id="POSITIVE-filter-toggle"
class="btn btn-default">
<fa type="far" icon="check-square"
ng-class="{'text-success':!model.sentiment[k].on}"
class=ng-isolate-scope text-success">
<svg class="svg-inline--fa fa-check-square fa-w-14"
aria-hidden="true" data-prefix="far" data-icon="check-square"
role="img" xmlns="w3.org/2000/svg"
viewbox="0 0 448 512" data-fa-i2svg>
//for the selected checkbox
icon="check-square"
//for the deselected checkbox
icon="square"
//for my parent
pt-id="POSITIVE-filter-toggle"
the pt-id is unique, but all the check boxes have same icon attribute value.
I can click on the filter using the pt-id but the checkbox is the same everywhere
Buddy the only way to check whether the checkbox/radio button is selected or not is via getAttribute('attributte's name') but it totally depends on your UI designed by dev team i.e. there should be a flag selected with values true and false.
So, my opinion is better to check you HTML from browser's Dev tool that is their any kind of flag is present or not. Else check with dev team for what to do with this case.
Also, every HTML tag shows some property attributes in the devtool, here is the image
But this Attribute "checked:false" you will not be able to fetch it via getAttribute method.
You can use css selector: parent selector > child selector to find child element of specific parent.
Then use getAttribute('icon') to get the value of icon for comparing.
element(by.css('a[pt-id="POSITIVE-filter-toggle"] > fa'))
.getAttribute('icon')
.then(function(value){
expect(value).toEqual('square');
})
Hi I have this element from a dropdown menu I try to select:
<div class="tt-suggestion tt-selectable">
<strong class="tt-highlight">Auto Customer</strong>
</div>
If I use element(by.xpath("//strong[contains(text(),'Auto Customer')]")).click(); I can select it no problem. But if I use element(by.xpath("//*[contains(text(),'Auto Customer')]")).click(); I get "Failed: element not visible"
Can someone explain this to me please?
Thank you
Because the * in //*[contains(text(),'Auto Customer')] means any tag, not only the strong Tag. But //strong[contains(text(),'Auto Customer')] must be strong Tag.
//*[contains(text(),'Auto Customer')] should find more then one elements on page, and the first one is not visible. You can try this xpath in Chrome DevTool's Element Tab to see how many elements it can find and the first one is visible or not.
In the code:
<img style="cursor: pointer; background-color: transparent;" onclick="changeTeamHint(2155);" src="/images/icon_edit_inactive.png">
onclick="changeTeamHint(2155);" is always changing. The number increases as I add more fields to my form.
How do I get the last element in Selenium IDE? For example, if I add a text field with "changeTeamHint(2156)", how do I use Selenium IDE to select the latest one? If its 2157, it selects 2157. Etc.
Here's what I got so far: xpath=(//img[#style='cursor:pointer;'])[last()]
But my coworker told me to try to find it by onclick, and here's what I got that works: xpath=(//img[#onclick='changeTeamHint(2155);'])[last()]
I tried: xpath=(//img[#onclick='changeTeamHint();'])[last()], but it gives me an error
I think you want to do a starts-with for value of the onclick attribute:
xpath=(//img[starts-with(#onclick, 'changeTeamHint')])[last()]
I am using WatiN to test an autocomplete drop down.
When a user types in the field after 3 characters have been entered jquery autocomplete is triggered and an un-ordered list is shown. It is mandatory for the user to select from the list.
I am unable to make a selection/trigger the autocomplete from the list using WatiN.
Here is some of the html the developers have used:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; display: block; width: 275px; top: 301px; left: 262px; ">
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC DEFGHIJ </a></li>
<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">ABC KLMNOPQ </a></li>
</ul>
They are using the jQuery UI autocomplete widget: http://jqueryui.com/demos/autocomplete/
Googling for jQuery UI autocomplete testing, I found this Stack Overflow Q&A:
Testing JQuery autocomplete ui with cucumber
containing what seemed to be the crucial information: “You need to first trigger a mouseover, then a click”
Then I Googled for WatiN mouseover, and found http://blogs.telerik.com/testing/posts/08-05-29/how_to_select_radcombobox_item_with_watin.aspx
This has a little code sample that includes:
Div divStudent3 = ie.Div(Find.ById("idRadComboBox_c2"));
divStudent3.FireEvent("onmouseover");
divStudent3.Click();
(to be clear our development code does not use telerik controls this is just an example)
At this point I thought I had a plan for how to drive this:
Type part of the desired value into the field (e.g. “ABC”)
Find a <ul> element with class “ui-autocomplete” and display style “block”, waiting until it is present
Within that <ul> element, find the <li> element whose text is the desired value (e.g. “ABC DEFGHIJ”)
Fire the “onmouseover” event on that <li> element
Click the <li> element.
I found two problems: firstly, that WatiN’s typing into the input field was very bad at triggering the appearance of the autocomplete menu,
and secondly that clicking on the menu item isn’t causing the autocomplete to occur.
I found that sending a downarrow key event to the input field encouraged the menu to appear, but didn’t cause the top menu item to highlight
(whereas if you type in manually and hit down arrow it does). Getting the menu item properly activated
(including getting its ID set to ui-active-menuitem) may be the missing link here.
Can anyone help me to understand and solve the two problems I have mentioned?
It took a bit, but here is a working example.
Key points
Call the JQuery object search method. This gets the dropdown list
to show.
then fire onmouseover the item you want.
Then click the item you want.
To get it to select the item correctly, I've needed to do all three above in that specific order.
Code
string searchValue = "c";
string selectItem = "COBOL";
ie.GoTo("http://jqueryui.com/demos/autocomplete/default.html");
ie.TextField("tags").TypeText(searchValue);
ie.Eval(#"$('#tags').autocomplete('search')");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].FireEvent("onmouseover");
ie.List(Find.ByClass("ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all")).ListItem(Find.ByText(selectItem)).Links[0].Click();
The above works using Watin 2.1. It won't work on WatiN 2.0 RC. I didn't check the actual 2.0 release. 2.0 RC doesn't have the List and ListItem objects. Tested only on IE8.
I have also run into a similar problem in an application that I am testing. When I type in the textfield using TypeText, the characters get typed twice.
What we did is as follows.
string mySubStr = value.Substring(0, value.Length - 3);
datavalue.Value = mySubStr;
datavalue.AppendText(value.Substring(value.Length - 3, 3));
Thread.Sleep(500);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Down);
datavalue.KeyDown((char)System.Windows.Forms.Keys.Enter);
where datavalue is a reference to the textfield and value is the value that is to be keyed in.