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');
})
Related
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)
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.
I want to trigger an event when an element is removed from the DOM.
In one of my templates I show a checkbox only when a condition is met:
{{#if some.thing}}
<input type="checkbox" class="checkbox">
{{/if}}
This checkbox later then is converted to a Bootstrap Toggle component.
What it does is, it hides the original checkbox and adds some markup to the document. All OK with that.
Now, if my collection changes and the condition, which previously was met, now evaluates to false, the checkbox is removed from the DOM. The node created from Bootstrap Toggle though stays present. So I want to remove the nde when the checkbox is removed.
I thought I could to this with the DOMNodeRemoved event but have some issues there:
Template.myTemplate.events({
"DOMNodeRemoved input.checkbox": function(el) {
$(el.currentTarget).bootstrapToggle('destroy');
}
});
The event fires, but somehow it ends in a cascade when I call bootstrapToggle('destroy') and the browser freezes. Also the event fires multiple times before and it makes me think this is not the correct way to watch for removed nodes in the first place.
Is there any better way to watch for removed elements and fire an event before they are deleted?
I know I could simply call a helper from my template, manually check if the node exists and delete the node with jQuery. But I'd like to see if this is possible with Meteor.events instead.
If you place the input (and the new bootstrap node/s) inside a child template, this should "just work" out of the box.
<template name="parent">
{{#if some.thing}}
{{> child}}
{{/if}}
</template>
<template name="child">
<input type="checkbox">
<!-- additional bootstrap nodes get instantiated in child -->
</template>
In the above, if some.thing === false the input and the new node/s will be removed from the DOM by Meteor automatically.
I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?
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.