I have this button:-
<div class="dsk-col-1-4 card new">
<div class="div_center_div">
<span class="icon icon_plus-black-symbol"></span>
<h2>Create</h2>
</div>
</div>
But I tried with find element by classname:-
driver.findElementByClassName("dsk-col-1-4 card new").click();
But it does not work.
Any help?
Move to your element and click. Example:
new Actions(driver).MoveToElement(yourElement).Click().Perform();
The "by class name" locator usually expects a single class name to be passed:
driver.findElementByClassName("card").click();
If you want to use multiple classes, go with a "by CSS selector"
driver.findElementByCssSelector(".card.new").click();
Note that the dsk-col-1-4 class is not a very good choice for an element locator - this looks very much like a layout-oriented class name which not only have a higher probability to b changed, but also does not bring any information about the element and it's purpose. card and new on the other hand are a better fit.
Ok so I couldn't understand exactly Which element you want to click on,
So based on my assumption , try below Xpaths :
1) if it is <div class="dsk-col-1-4 card new"> that you want to click
//div[contains(#class,'dsk-col-1-4 card new')]
2) If it is that you want to click,
//span[contains(#class,'icon icon_plus-black-symbol')]
3) If it is <h2>Create</h2> that you want to click,
//h2[text()='Create']
Hope this Helps!!
Within your locator you're passing multiple class names, and although they are both assigned to the element the findElementByClassName function realy only works when it is a single class name. The way I'd do it would be to use findelement(By.Xpath()), in this instance you'd need to use
webDriver.findElement(By.xpath("//div[contains(#class,'dsk-col-1-4 card new')]")).click();
Related
I was following the tutorial Tour of Heroes. While adding a new hero they say
You can use an element paired with an add button.
Insert the following into the HeroesComponent template, after the heading:
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
Here I don't understand what is #heroName inside in input element (what is it called) and how does it help in pairing that input element with the button element.
Basically, what is that #<keyword> syntax within that input element. I know that it is not the id as that is already declared.
To answer the question, it's a reference to the input. You can find more details here:
https://angular.io/guide/template-reference-variables
Template variables help you use data from one part of a template in
another part of the template. Use template variables to perform tasks
such as respond to user input or finely tune your application's forms.
In the tutorial context, it's a reference to the input element. It helps to pair it with a button to be able to access it's value, without having to actually define a variable in the component.ts and trying to update the template directly. This help you "skip" a step, and actually have direct access to that value.
Template reference variables can become very handy in certain cases and are commonly used for example in angular material ( to call a function for a component )
<mat-menu #menuComponent ...></mat-menu>
<button (click)="menuComponent.close()"></button>
In the above example, you bind the menuComponent variable to "mat-menu" component, in which case you can access all the variables, public methods of such. In that case we can call "close" method from the mat-menu component.
Let me know if this is still unclear and I can try to give you more examples and explanation
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
I have a component named 'stack-item' which have a slot , its html will look like this
<div>
<div>1<div>
<div class='slot-style'><slot></slot></div>
</div>
I have used this component like this
<stack-item>
<another-component></another-component>
</stack-item>
From 'another-component' how do i get the element reference for class ='slot-style' for calculating the slot width and other properties ?
I wrote a workaround
let slotElement =this.shadowRoot.host.parentElement.shadowRoot.querySelector('slot').parentElement;
but is there a clean way of achieving this?
I don't know if this can be considered dramatically simpler, but the scenario you give indicates that you already know the host component is stack-item and that component has a slot wrapper with the class name 'slot-style'. Given that you can obtain a reference like this (this works from within the component as well as the host document):
let slotElement = document.querySelector("stack-item").shadowRoot.querySelector(".slot-style");
//display width
console.log(slotElement.clientWidth);
this.shadowRoot.host is equivalent to this.
So you could try:
this.parentElement.shadowRoot.querySelector( 'div.slot-style' )
I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium
I noticed that some divs can be clicked and I found that class='demo-button' is one of them
<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>
Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/
As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.
Does anyone have an idea why there is a difference between this demo button div-s ?
I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class
https://codepen.io/duleorlovic/pen/VqWaEg
The first three are clickable because the class attribute contains the word "button" (See source).
For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).
But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:
button
tab
link
checkbox
menuitem
menuitemcheckbox
menuitemradio
(Source)
So if your div elements represent check boxes, your code would look like this:
<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>
In this case you are not depending on specific class names, which are by the extension considered "as unreliable".
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span