I am lost with getting a trigger to fire for all menu items on my site. As there is no Class element given I try to do the check with the Click Element field (. But any part of it I try I get a mismatch in GTM preview mode.
Can anyone tell me what would be valid CSS selector for that trigger?
Click Element for menu item "Kontakt" is
https://www.deutschland-greeter.de/kontakt/: html.js > body.home.page-template-default.page.page-id-39.et_pb_button_helper_class.et_fixed_nav.et_show_nav.et_primary_nav_dropdown_animation_fade.et_secondary_nav_dropdown_animation_fade.et_header_style_left.et_pb_footer_columns1.et_cover_background.et_pb_gutter.windows.et_pb_gutters3.et_pb_pagebuilder_layout.et_no_sidebar.et_divi_theme.et-db.chrome > div.et-animated-content#page-container > header.et-fixed-header#main-header > div.container.clearfix.et_menu_container > div#et-top-navigation > div#et_mobile_nav_menu > div.mobile_nav.closed > ul.et_mobile_menu#mobile_menu > li.testclass.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1094#menu-item-1094 > a
One of the matches I tried is div.container.clearfix.et_menu_container
Thanks a lot!
Klaus
This will work for both desktop and mobile Kontakt in the main menu:
li#menu-item-1094>a[href="https://www.deutschland-greeter.de/kontakt/"]
If you want to have it for every a on the page that leads to /kontakt/ (like what you have in the footer), use this:
a[href="https://www.deutschland-greeter.de/kontakt/"]
I would go with the first option.
Here's a variant that will catch all top menu clicks for desktop:
ul#top-menu>li>a
Keep in mind that using CSS selectors for tracking (also referred to as DOM scraping) is ultimately not reliable since front-end devs won't keep your tracking in mind when they update the site.
Related
I have a 'Meet Our Team' section on my home page and I want to be able to click a menu button 'Meet Our Team' and be directed there, even if I click it from another page.
My problem is that if I use #meet_our_team as the URL, the link doesn't work from another page. However, if I use a relative or absolute path plus '#meet_our_team' (e.g. home/#meet_our_team), the functionality works but it becomes styled like the 'Home' button when on the home page (i.e. the button looks pressed).
This is because the CSS class 'current-menu-item' is applied to the list element.
Is there a way I can have a working button that also styles correctly? I assume if I can suppress aria-current, it would work but I don't know if that is possible.
It was a simple enough fix. Simply add the below to Additional CSS. On my first attempt, I didn't specify 'a' and so it didn't work
#menu-item-1745 a {
color: #5a5a5a;
}
I try to use Click Element id=elementid in Robotframework.I have Selenium2 Library.I have a Menu collapsible.See little arrow on Entity 1 on first print screen.I try to identify the element id.I cannot see element id when I inspect this.I see only jotid that I do not think is the same.So, I am not able to use click element in order to expand my menu.I appreciate anyone's help as I am still learner.Please see also the images of a) Code, Menu, Inspected Element
You can also find it using xpath, so:
Click Element | //li[#wuid="gx:309..."]
jotid is not id, so you cannot locate it by id.
You could try keyword:
Click Link ENTITY 1 -Introduction
or find it by css:
Click element css=a[jotid='wuid:gx:4286...<the rest of it>']
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
I'm a backpacker and a programmer, trying to use the second skill to find openings in a full campsite. Rather than crawling fro scratch, I'm using the end-to-end testing framework nightwatch.js to navigate for me.
I've hit a roadblock, because nightwatch is having difficulty finding a specific element using css selectors.
Here are the elements and page:
Here is my test code:
Previous Attempts
My test code will click on the selection box with #permitTypeId. It will see that #permitTypeId option is visible. It will not see or click on any of the options when more specific values are specified. The five .click()'s are all css selectors I've already tried. None of the options are set to display:hidden or display:none. I have also tried all of the above without the .waitForElementToBeVisible() just in-case the waiting causes the dropdown to hide.
I've successfully clicked options from different dropdown menus on this website without any problem. Just this one is causing a headache.
The tests are running with the most current Selenium server and Firefox on Mac Yosemite.
tl;dr
Nightwatch.js/Selenium won't click on something from a dropdown menu.
The Path...
Cory got me thinking about jQuery and native DOM manipulation. Tried going that route and was successful selecting the correct option using Selenium's .execute() function:
.execute('document.getElementById("permitTypeId").options[1].selected=true')
However, it was not triggering the onchange event.
Saw this post which made me start thinking about using key-strokes and this one which suggested using arrow-keys to navigate down a <select> element to the option, then hitting enter.
...to the Solution
.click('select[id=permitTypeId]')
.keys(['\uE015', '\uE006'])
I've found that this is an issue with Firefox. Chrome and PhantomJS operate well clicking <option> tags.
you should be able to click like this way
browser.click('select[id="permitTypeId"] option[value="1451140610"]')
Additionally I was able to add a .click event for the specific option once I did a .click for the select. see my example below:
.click('select[name="timezone"]')
.pause(1000)
.click('option[value="America/Chicago"]') //selects the option but doesn't click
.pause(5000)
.keys(['\uE006']) //hits the enter key.
another solution:
.click('select[id="permitTypeId"]')
.waitForElementVisible("option[value='1451140610']")
.click("option[value='1451140610']")
Very simple way is to use .setValue('#element', 'value of option')
Web page contain a button with some text for example "Test". This button actually is a toolbar element. (class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When I tried to use the following click methods, the button did not react.
browser.div("Test").click();
browser.click("id");
browser.click("");
browser.div("id").click();
browser.byId("id").click();
browser.containsText(browser.byId("id"),"Test");
browser.div("Test").in(browser.table("Generar")).click();
browser.byXPath("//div/Test").click();
Could anybody suggest me an alternative methods that is able to resolve the above problem?
Try with:
browser.xy(browser.div("Test"), 10, 10).click();
This will click a little inside the div.