Issue:
Clicking some anchor elements in a mobile device using Chrome's device emulator fails to navigate to target links.
Here I'm trying to test the behavior of switching the style of product cells from grid view to list view by clicking an icon which is an anchor tag with an href that contains the parameter "disp=list".
Right now clicking the icon does nothing, and the same behavior can be seen in click actions performed on other anchor elements in the navigation bar.
Everything works as expected when I test manually in my chrome emulator and saucelabs but fails when I try with testcafe which shouldn't make a difference since it uses my locally installed browser.
page to test
Command:
testcafe "chrome:emulation:device=iphone X" path-to-file.js
Browser/OS:
Chrome 75.0.3770 / Mac OS X 10.14.5
Here's the test:
fixture`[mobile] navigation`
.page('https://tw.bid.yahoo.com/search/auction/product?qt=product&kw=iphone&p=iphone')
test
('Clicking the view button should switch item cell view', async t => {
await t
.click(Selector('.ViewSwitchButton__viewButton___1r1Kh.MobileNavigation__menuButton___1OVvQ'))
.expect(getPageUrl()).contains('disp=list')
})
clicking the view style icon should update the page from grid view to list view with the url updated to https://tw.bid.yahoo.com/search/auction/product?disp=list&kw=iphone&p=iphone&refine=-prop_3%2C-prop_2
I've reproduced this behavior under "testcafe-hammerhead" proxy. Here is an issue you can track: https://github.com/DevExpress/testcafe-hammerhead/issues/2080.
The fix was included in TestCafe v1.6.0.
Related
In this page :
https://www.bedbathandbeyond.com/store/product/o-o-by-olivia-oliver-turkish-modal-bath-towel-collection/5469128?categoryId=13434
I can see a button with "Add to Cart" text , I can also see it in dev tools.
But when the same page source is retrieved by ChromeHeadless using selenium, and my script searches for it, this text is not present.
I tried with selecting show page source in the browser, the source too did not have the "Add To Cart text"
Further I used a curl to GET page, "Add To Cart" wasn't in the returned page source either.
What am I doing wrong?
is the page hiding the button?
How can I check for its presence, for product availability check?
The elements you are looking for are inside the shadow DOM. You need to access the shadow root first. Hard to see exactly what is going on in the DOM without some trial and error, but something like this:
WebElement shadowHost = driver.findElement(By.cssSelector("#wmHostPdp"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement addToCart = shadowRoot.findElement(By.cssSelector(".shipItBtnCont button"));
More info on Shadow DOM & Selenium — https://titusfortner.com/2021/11/22/shadow-dom-selenium.html
If I create a new Blazor application (Server-side or WASM), the default template that is provided with the Counter and Fetch Data menu items doesn't work properly on a mobile device. It run's ok on a desktop browser. Is there something setup incorrectly?
On the mobile, the menu never opens. The hamburger Menu button cannot be tapped. Apart from that, if you manage to navigate by URL to another page, the page keep loading without giving any error.
Do you know if it is possible to create a custom sidebar like the one for "show sidebar"?
I know you can create a popup view, but it hovers above the web page - I am looking for a native kind of view like the "sidebar".
Safari does not support any native sidebar at the moment, neither does Chrome (from which Safari copied). Only Firefox and Opera do: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
I have rspec tests using Capybara which work great locally and on browserstack with a configuration of OS X Mavericks/Chrome 33 on browserstack.
When I change the configuration to Windows 7 / IE 10 I'm getting an ElementNotVisibleError on the last line of code represented here:
find('#myIdToExpandMyList').click
#click selected one
find(:xpath, "//SomeXPATHToRepresentAValueInMyList", :visible => :all).click
What is happening (I can see due to screenshots) is that the first line of code is not working. For some reason the click on this element is not working.
Here is an image of the expand (+)
When the user clicks on the plus sign the items in the list appear. Since the click isn't working the items never appear and the last line of code above doesn't work. Why doesn't this find/click work in IE 10 (with Selenium Webdriver)?
Here is the html code behind the expand:
<a id="myIdToExpandMyList" href="javascript:SomeJavscriptCallToExpandWithValues(params)">
<img src="plussign.png" alt="Expand">
</a>
UPDATE: In looking at this further this appears to be related to modal dialogs. In my case I have a modal dialog opening (z-index is set and the rest of the page is not reachable). For some reason (only in IE) I can't click on a link on the modal dialog using a capybara find(element).click. It seems to find the element otherwise I believe I would get an error on that.
Second UPDATE: After trying all sorts of things (falling back to selenium, different IE versions, native clicks, nothing worked. The only thing that worked was executing the javascript via execute_script. The plus sign (href) triggers a javascript function which opens the list - I called it directly. I do not like this solution so hopefully someone has a better one.
I am replying on behalf of BrowserStack.
I understand for your tests on IE 10, the logs show that the expand(+) button was clicked successfully. However, the click did not initiate the action (expand menu) it was supposed to. Thus, the subsequent actions failed.
As you have mentioned, you are able to run tests locally on your machine. Could you drop us an email with following details:
IEDriver version you use locally
Exact version of the IE browser you test on
Selenium Jar version
I'm using jQuery mobile, and am using a home button in the header. When clicked, the home button has a blue highlight. I want to get rid of this, but can't seem to track down the CSS rule/-webkit CSS rule to do this.
Screenshot:
Can anyone help?
In jQuery Mobile the class added to buttons just pressed is: ui-btn-active. Here is a link to the documentation that talks about this class (although it doesn't say much): http://jquerymobile.com/demos/1.0b2/docs/toolbars/docs-navbar.html
Not sure if this is what you needed but I figured it might help. I'd recommend using FireBug or some such DOM Inspection tool to view the button in real-time.
You sure that's not just the default hi-light that links get when focused?
Try
#buttonID:focus{
border: none;
outline: 0;
}
An idea to help you track the problem as you don't share the link (you can easily just share the first page), is to use Safari, Chrome or even Firefox and make them act as an iPhone so you can use their Inspector / Firebug to track the problem
Firefox has a Agent User Switcher that you can easily make use in order to the browser be intrepertate as an iPhone
Chrome has it as well just add the User Agent string in the Extension options to create a new option
Safari 5 is the easiest one as this is already built in:
Open Safari and go to the Preferences, move to Advanced. At the bottom of the tab there is a check box for Show Develop menu in menu bar.
Go to the Develop menu and move to User Agent and select any iOS device.