I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();
Related
I have the following element on a page (it's a button with the word Next that you click)
<div class="aaabutton">
<div class="aaacontainer">
<div class="aaatext">
Next
</div>
</div>
</div>
No matter what I try it can't find it.
Tried following:
css=.show .aaacontainer
xpath=//div[#id='Next']/div[3]/div[2]/div/div
xpath=//div[3]/div[9]/div[3]/div[2]/div/div
Times out trying to find it (for example Trying to find xpath=//div[#id='Next']/div[3]/div[2]/div/div... Failed:)
Since you didn't share all your existing code trials and a link to that page we can only guess. So, I guess this may work:
xpath="//div[#id='Next']//div[#class='aaabutton'][contains(.,'Next')]"
I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.
we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-bind="model.txtErrorMessage" instead of {{model.txtErrorMessage}}
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.
Angular provides CDK APIs built in to handle this scenario.
https://material.angular.io/cdk/a11y/overview#example-1
#Component({...})
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
liveAnnouncer.announce("Hey Google");
}
}
Or else you can keep a simple span or div, and update your message programmatically.
<span
aria-live="polite"
class="ada-visuallyhidden"
[innerHTML]="yourCustomADAMessage"
></span>
I have been trying to click on a link in my application at work , but the control failed to click on the link whichever locator I used. I test all the locators with Selenium IDE and javascript before using them in the script and it all seem fine prior to running the test. I manage to identify and click on the link with this:
#FindBy(css ="/html/body/div[4]/div/div/div[2]/div[1]/a/strong") but I ran the test the second time but it failed to click on the link same.
See below the html code:
<div class="container container-outer">
<div class="row-fluid long-text-fitted content-container" id="page-content-container">
<div class="span12">
<div class="row-fluid container-alert">
</div>
<div class="left-side-spacer-layout right-side-spacer-layout" id="page-content">
<div class="button-spacer" id="breadcrumb-content">
<a href="/shopping/marketplace/landingPage">
<strong>< Back to Search Results</strong>
</a>
You should click on parameter. remove strong attribute.
/#FindBy(css ="/html/body/div[4]/div/div/div[2]/div[1]/a")
I would avoid using XPath in general and especially an XPath that starts at the HTML tag. That makes the test very fragile. I would suggest a CSS selector like the below.
driver.findElement(By.cssSelector("#breadcrumb-content > a")).click();
The CSS selector reads find an A tag that is a child (>) of an element with an ID (#) of breadcrumb-content.
Read more about CSS Selectors.
Using absolute Xpath is not a good idea. As you said it is working for the first time then possible your DOM strcture is changing after click it once
You can try with below xpath:
driver.findElement(By.xpath("//strong[contains(.,'< Back to Search Results')]")).click();
If still not working, you should try to click using JavascriptExecutor as it directly working on HTML DOM. Feel free to locate element in below code according to your convenience:
WebElement element=driver.findElement(By.xpath("//strong[contains(.,'< Back to Search Results')]"));
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
I'm new to Selenium IDE and can't find exact answer to my question elsewhere.
I have Login form that loads error message in span tag using AJAX.
Code looks like this:
<dd class="field-error-template atk-form-error">
<i class="ui-icon ui-icon-alert"></i>
<span class="field-error-text">Incorrect login information</span>
</dd>
I used following Selenium code to verify that this span appeared on screen:
waitForElementPresent css=dd.field-error-text span
However it returns false so any other ideas? I don't want to put delay as I don't think it is good practice.
Thanks,
Gita
You got your classes mixed up; the selector should either be this
dd.field-error-template span
Or this
dd span.field-error-text
(or use both classes)