Dojo - ScrollingTabControllerMenuButton freezes TabContainer in Firefox - dojo

I recently by accident found an issue I have with a web application I have made entirely with dojo.
I have a TabContainer and a toolbar with buttons and each button adds a Tab in the TabContainer.
Each of these new Tabs has as children, created programmatically, one or more of the following BorderContainers, ContePanes, Editors, FilteringSelects, Uploader and Buttons. I should point out that I do not have parseonLoad: true byt false and I call manually the parsers.parse when required. I should point out that in the ContentPanes in the content attribute I put also declarative filteringSelects and ValidationTexts and Uploader I hope that is not a problem.
Everything is working great in all browsers even in IE9 besides one thing in Firefox 12.
When I create many new tabs and the ScrollingTabController gets created (The left/right and dropdown arrows of the tabstrip) when I use the ScrollingTabControllerMenuButton (the down arrow at the far right) the TabContainer behaves wrongly and eventually freezes. Firebug shows weird errors when I select different tabs via this menu of the tab strip. Errors of the buttons that I have in these tabs, weird errors mentioning StackController or ScrollingTabController
[ e.g.
button is undefined
if(this._selectedTab === button.domNode){ StackController.js (line 222) ]
different each time...
This weird behavior only happens in Firefox. IE9 and Chrome do not have any issue at all!
Could anyone have an idea on what might be the problem? Is it a known bug? Is it a problem that I have many widgets in each Tab ?

It seems that it is indeed a browser specific bug and as I was told it should be fixed in the following releases
I first reported it to the dojo community and from there they reported it to the Firefox team
http://bugs.dojotoolkit.org/ticket/15496

Related

Bootstrap tooltip not showing in ASP.Net MVC application

I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.

Selenium- How to validate if the element has certain styles

I need to write a test script to validate that a button is present on the page and the button becomes sticky and stays attached at the bottom of the screen for mobile breakpoint.
I have already written a script where it resizes the browser window. However, How do i prove that a button remains sticky to the footer no matter how much scrolling user does.
Button retains its id and place in the DOM when its styling changes for the mobile view.
I need solution for all major browsers but if someone can guide me for Chrome that should be good enough.
I have looked into getComputedStyle but i think its bit messy. i am looking for more elegant solution using some library.
This check is baked in selenium - there's a webelement method isDisplayed() returning a boolean. Here's a link to the Java bindings - https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html#isDisplayed--
And if you're wandering if this is a "real" check is the element in the viewport, here's the webdriver's explanation how it's done - https://w3c.github.io/webdriver/#element-displayedness (in summary: yes, as much as this can be done).

How to remove this border from tooltipdialog that shows up on mouse click?

Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.

Unable to click button in mobile web in appium

After exhaustively searching for this over various forums, I still don't have an answer.
Here are complete details
I'm identifying the element through classname which points to multiple(4) buttons. I'm iterating through buttons and then search for text and when there is a match i click it.
This works fine with selenium webdriver and browsers such as firefox,chrome
Now I'm doing the same thing with appium.
Out of 4 buttons which are identified through classname, the script clicks 2 buttons successfully but for two buttons click happens(i can see the button being clicked) but new page which should be loaded is not loaded. The buttons for which click is not happening are in a footer class and other two are in div class.
Things i have already tried
Actions builder - click(), clickandhold()
Javascript executor
I'm currently trying with touch options, tap and by switching to native view but haven't found any success.
If any has encountered the same, a solution will be appreciated.
I want to avoid xPath because that might change in the page I'm working on, and I want to stress that the script is able to find the button, but is not able to click it properly.
You can filter your locator by using class name and index. Like this:
driver.findElementsByXPath("//*[#class='android.widget.ImageView' and #index='0']");
This xpath won't get change on other devices too.
Could you see: Unable to find an element in Browser of the Android emulator using Appium and C# ?
In case of testing web apps in browser the elements should be located as usual elements on the web page ( not as some classes like android.widget.EditText and android.widget.Button).
Upadting appium java client to 1.5.0 (from 1.3.0) solved the issue. Need to check why!

Safari Web Inspector - any way to return to selected element on reload

Is it possible to have the Safari web Inspector retain the position that the DOM tree is expanded to?
At present, you expand the DOM tree to an element and then as soon as the page is refreshed the entire DOM structure is collapsed again necessitating drilling right the way back to the original element.
I saw this post on the subject a couple of years back but the code has now changed so it doesn't apply.
I have also opened a bug report at the WebKit bug tracker.
That bug ended up getting fixed: https://bugs.webkit.org/show_bug.cgi?id=121665