3 li items all are different.
If all li are the same it means duplicate and we have to automate this scenario
I expect that code should able to automate the process of finding duplicate li items
$runAction("org.getopentest.selenium.ReadElementText", {
locator: $data("locators/Profile").ClientsCSP,
$localData: {
description: "$output.text"
}
});
var str1 = $localData.abc;
$log(str1);
<div data-autoid="Clients" class="m-section ItemList__itemList___2dOxf m-body" style="" xpath="1">
<ul>
<li data-autoid="Clients_item_0" class="ItemList__label___1N5Nz">1-800 Contacts</li>
<li data-autoid="Clients_item_1" class="ItemList__label___1N5Nz">10 Advertising</li>
<li data-autoid="Clients_item_2" class="ItemList__label___1N5Nz">clients_23rd July</li>
</ul>
</div>
store li items in the array and if duplicate found log it
The best way to go about it is to use the GetElements action.
- description: Find all li elements
action: org.getopentest.selenium.GetElements
args:
locator: ... # This locator must match all li elements
- script: |
var listItems = $output.elements;
var itemsTextArray = listItems.map(function(li) {
return li.getText();
})
// Next, check itemsTextArray for duplicate items
Related
I have a stencilJS component with two named slots. Is there a way to determine if the slots have been assigned values? For instance, the code snippet below show named slots for "logo" and "menu." How can I check inside the component if both named slots are not empty? Ideally I want to check from inside the component and during componentWillMount() . Thank you.
<koi-menu breakpoint="768" userToggled="false">
<div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>
<ul class="nav__wrapper list mw8-ns center-m" slot="menu">
<li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
</ul>
</koi-menu>
The use of a slot can be detected from the host element in the componentWillLoad() function:
hasLogoSlot: boolean;
hasMenuSlot: boolean;
#Element() hostElement: HTMLStencilElement;
componentWillLoad() {
this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}
This might not apply to your problem, but if you only want to style the slotted elements—say only add margins on non-empty slots—you can use the ::slotted pseudo-element:
::slotted([slot="logo"]) {
/* Apply styles to non-empty logo */
}
::slotted([slot="menu"]) {
/* Apply styles to non-empty menu */
}
<ul>
<li (click)="AddColor($event)">ONE</li>
<li (click)="AddColor($event)">TWO</li>
<li (click)="AddColor($event)">THREE</li>
</ul>
AddColor(e){
e.srcElement.style.color="blue"
}
I have the above list when i click any one of the li item out of 3, the clicked label color should be changed. when i click another all item colors should be revert back to original and change color of current clicked item.
#Mehdi said, you should not access DOM directly untill there is a need.
Always keep in mind, drive your view with data rather than accessing
DOM directly
I have forked and working snippet https://plnkr.co/edit/fgINMc?p=preview
When using Angular, you don't want to directly manipulate the DOM element. Rather let angular deal with it.
In your example, you can generate your list from an array you declare in the code like so
export class YourClass{
links:any;
activeLink = -1;
//...
constructor(){
this.links = ['ONE','TWO','THREE']
}
//...
}
and then in your template you could have :
<ul>
<li *ngFor="let link of links; let i = index"
(click)="activeLink = i"
[ngClass]="activeLink == i? 'blue' : '' " >
</li>
</ul>
and declare a css class blue :
.blue{
color:blue;
}
I have below HTML code which recursively create list items based on list returned from Component and I want to apply 'first-child' CSS class to first List item only.
<ul class="link-list-horz">
<li *ngFor="let menu of menulist" [ngClass]="first-child:">
{{menu}}
</li>
</ul>
.first-child a
{
border-radius: 10;
}
export class AppComponent {
name = 'Quiz';
menulist = ['Home','AngularQuiz'] ;
useremailid = 'Gaurav-Gupta';
}
Please suggest. I am totally new to Angular2.
ngClass needs a condition to know whether to set that class on the element. You can use the built-in index that comes with ngFor for that.
Try this:
<li *ngFor="let menu of menulist; let i=index" [ngClass]="{'first-child': i === 0}">
I am creating and ordered list using Text Angular and able to create orderlist which starts with 1,2,3 by default. Text angular has 2 modes
1. Rich Text mode
1. HTML mode
HTML mode shows
<ol>
<li>test</li>
<li>test</li>
</ol>
Rich Text mode will show as:
test
test
If I need to start ordered list with number 5, I need to switch to HTML mode first and do the below change
<ol start="5">
<li>test</li>
<li>test</li>
</ol>
Now the Rich Text mode starts the numbering with 5
test
test
The real problem is how to change the numbering by clicking on the pseudo element generated by the < ol> tag while on the rich text editor mode. After googling and research it seems the pseudo element cannot be changed.
Stack overflow editor gives the option of changing this in Rich Text mode itself!
So while adding the below data in Rich Text mode starting with 4 for example
4. number 4
3. number 3
The preview mode ends up displaying buggy result.
number 4
number 3
if you noticed 5. number 3. this was generated from the Rich text editor.
There are JS way to replace tags in the DOM and give a simlar tag look n feel using combination of html tags etc which I am not looking for at this point.
Would there be a creative CSS way to change the number on the fly in the rich text mode (rather than doing html mode) in Text Angular.
As I understood, what you need is a feature for changing the starting number when using the ordered list which is not implemented by the text-angular editor at the moment. What text-angular provides you in such cases is easy extending of the toolbar by adding new or overriding existing functionalities.
Here is a Plunker with an example implementation of the feature you need. I have implemented it by overriding the ol button configuration like this:
app.decorator('taTools', function ($delegate, $document, taSelection) {
// NOTE: override the ol action
var olAction = $delegate.ol.action;
$delegate.ol.action = function () {
if (!this.active) {
// NOTE: replace with better way for integrating the feature
var startingNumber = $document.find('#startingNumber').val();
// do the ordering
var result = olAction.apply(this, arguments);
// change the starting number
var element = angular.element(taSelection.getSelection().start.element);
var parentOls = element.parents('ol');
if (parentOls.length > 0) {
angular.element(parentOls[0]).attr('start', startingNumber);
}
// clean up
element = null;
parentOl = null;
return result;
} else {
return olAction.apply(this, arguments);
}
};
return $delegate;
});
The way for configuring the starting number IMO is not so good, it's just for showcase because replacing it with better way takes more effort (ex. dropdown on the ol button). You can replace it with what is most convenient for you.
For more information and examples on Text-Angular editor you can check its documentation and the page for customizing the toolbar.
Edit: After the question was edited my answer no longer fits very well. Since it still received upvotes afterwards I'm going to assume that it was nonetheless helpful and just leave it here.
As has been mentioned in comments and other answers, the clicking part is not possible. It is possible to highlight the numbering.
Add a custom counter in the :before part of your <li> tags and have them react to hovering:
ol {
counter-reset: my-counter;
}
ol > li {
list-style-type:none;
}
ol > li:before {
counter-increment: my-counter;
content: counter(my-counter) '. ';
}
ol > li:hover:before {
color: red;
}
Example here: http://jsfiddle.net/u1uhr7s8/
Again, it is not possible to add anything clickable in place of the numbers because the before: bit does not truly become part of the DOM.
'selected' here could mean a number of different things. You'll need to clarify your question to get the answers you're after, but if you're looking to reference this in Javascript somewhere, you can use any of the following:
document.getElementsByTagName('ol') //Will return a list of all OLs on the page
document.querySelectorAll('ol') //Will return a list of all OLs on the page
$('ol') //Will return a list of all OLs on the page, but requires JQuery
To get the '1' or '2' li elements, you'd include the LI within the query, or select it as a child of what's returned:
var myOL = document.getElementsByTagName('ol')[0];
var myItems = myOL.children;
or with JQuery
var myItems = $('ol li');
If you're talking about targeting the OL with CSS rules, you just use the tag name, e.g.
ol {
background-color: #FF0000;
}
and again, if you're after the LIs you can either target them all:
ol li {
background-color: #FFFF00;
}
or target a specific child using nth-child:
ol li:nth-child(2) { /* second child - '2' in your case */
background-color: #FFFF00;
}
Below solution is inspired by S.Klechkovski's answer. On the editor type a number, say 5 , select the number, click on on ol tag in TextAngular, the old now starts with 5
The difference is in var startingNumber = parseInt($(taSelection.getSelectionElement()).text());
$provide.decorator('taTools', function ($delegate, $document, taSelection) {
// NOTE: override the ol action
var olAction = $delegate.ol.action;
$delegate.ol.action = function () {
if (!this.active) {
// NOTE: replace with better way for integrating the feature
var startingNumber = parseInt($(taSelection.getSelectionElement()).text());
// do the ordering
var result = olAction.apply(this, arguments);
// change the starting number
var element = angular.element(taSelection.getSelection().start.element);
var parentOls = element.parents('ol');
if (parentOls.length > 0) {
angular.element(parentOls[0]).attr('start', startingNumber);
}
// clean up
element = null;
parentOl = null;
return result;
} else {
return olAction.apply(this, arguments);
}
};
return $delegate;
});
In order to learn riot.js I started from well-known bootstrap navbar example. Then I added my custom tag using riot.js:
<script type="riot/tag">
<menu-item>
<li><a href={this.href}><yield/></a></li>
this.href = opts.href
</menu-item>
</script>
<script src="https://cdn.jsdelivr.net/g/riot#2.2(riot.min.js+compiler.min.js)"></script>
<script>
riot.mount('*')
</script>
Finally I tried to use my new tag, replacing
<li>JavaScript</li>
by
<menu-item href="http://getbootstrap.com/javascript">JavaScript</menu-item>
Result is broken. Why? (original non-broken example can be found here: jsfiddle.net/0hp9pwpu)
Your riot tag markup is inserted into your riot tag i.e. what happens is
ul
li
from your working example is actually
ul
menu-item
li
in your non-working example. Since bootstrap styles the navigation items expecting a certain hierarchy, your result is broken.
This was raised as an issue (https://github.com/riot/riot/issues/295) and closed using https://github.com/riot/riot/pull/569 i.e. instead of using the riot tags directly there is an option to add the riot tag as an attribute. So something like
<li riot-tag="menu-item" href="http://getbootstrap.com/javascript">JavaScript</li>
Admittedly, it is not as semantic
Fiddle - http://jsfiddle.net/86khqhwu/
Bootstrap is not adapted for use with Riot.js
Your resulted html is :
<menu-item href="http://getbootstrap.com/javascript">
<li>
JavaScript
</li>
</menu-item>
Bootstrap css is broken ...
Perhaps not so elegant, but in riot 2.3.13 I'm using something like this in a .tag file:
<menu-bar>
<ul list="<yield/>">
<li each={ item in items }>
{ titles[item] }
</li>
</ul>
<script>
this.titles = {
inventario: 'Inventario',
resguardos: 'Resguardos',
catalogos: 'Catálogos',
reportes: 'Reportes',
configurar: 'Configurar',
utilidades: 'Utilidades'
}
this.items = null
this.on('mount', function () {
var el = this.root.querySelector('ul')
this.items = el.getAttribute('list').trim().split(/,\s?/)
el.removeAttribute('list')
this.update()
})
</script>
</menu-bar>
Now, in the HTML page:
<menu-bar>
inventario,resguardos,catalogos,reportes
</menu-bar>
Works.