IE (10) Does not render Box shadow well on inputs - internet-explorer-10

I created the following jsbin to show the problem. http://jsbin.com/fewuli/2/ If you run this in any browser but IE10 and focus the input then the box shadow outline looks great like this:
But if you run this in IE10 (or IE9+) it doesnt render the top portion of the box shadow on focus like this:
Is there any way to fix this without increasing the box shadow size (last option?)

I tested the link you provided and checked it out in different versions of IE (11, 10 and 9) and they all showed the input box being highlighted when it held the focus. (I used the IE toolbar Emulation to view the differences)
If you are still having problems with this you could try adding a script that helps older IE browsers support HTML5. Modernizr is one of these scripts that will help in this way. There is also HTML5 Shiv but that only supports IE browsers 9 and older.
Another suggestion would be to try MS Visual Filters and Transitions and apply it to your INPUT class:
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";

Related

firefox-headless contol box is missing from screenshot - selenium - linux

I am facing exactly same problem https://github.com/mozilla/geckodriver/issues/1358.
Firefox-headless mode screenshots taken from linux are missing input box
Question:
Do we have any alternative to solve this problem. I am using FF 83
You saw it right. For Selenium driven GeckoDriver initiated firefox Screenshot in headless mode doesn't show form controls correctly.
This issue was closed as the original issue is with Firefox and being tracked through Some input field are black when taking screenshot in headless mode is specific to linux platform where #Michael Smith mentioned:
It looks like this is a result of an nsITheme object not being created
in headless mode under
GTK,
as nsNativeThemeGTK depends on APIs which we can't access in headless
mode. As a result this shouldn't affect the Windows and macOS
platforms.
Further he detailed:
We have existing fallback paths for when a nsITheme object is
unavailable, but it looks like they're not being exercised on any of
Windows, macOS, or Linux under normal conditions. For example, the
width of the dropdown button is determined by the width of the
scrollbar in the dropdown list. This is measured by
GetNondisappearingScrollbarWidth,
which boils down to asking the vertical scrollbar nsBoxFrame what its
preferred width
is.
Normally this ends up being calculated using
nsITheme::GetMinimumWidgetSize which calls out to platform-specific
code; in the absence of a theme, we rely on the computed size from the
CSS applied to the scrollbar XUL element and its children. Note that
vertical scrollbar thumbs have a minimum height
assigned,
but no minimum width, so the computed scrollbar width ends up being 0,
and the dropdown buttons end up being 0-width. Adding a minimum width
to thumb[orient="vertical"] causes the dropdown buttons to show up
under headless mode. It also causes the scrollbar to show up along the
side, but there's no color set for the slider, so it's just a white
strip.
Conclusion
This issue was assigned Priority 3 and is still in Open state with no alternatives.
This can be solved using firefox settings.
widget.disable-native-theme-for-content to true
Reference :
https://www.reddit.com/r/firefox/comments/k2nghh/any_alternatives_for_firefoxlinuxheadless/
PS: Credit goes to reddit user who answered my question :)
I verified it is working.

Bootstrap Dual Listbox - Both Lists Superimposed with "0 selected" in Chromium-based Mobile Browsers

I am experiencing an issue with Bootstrap Dual Listbox wherein both the selected and non-selected lists are superimposed with a "0 selected" message in Chromium-based mobile browsers. The lists are not visible but are selectable by tapping on the down arrow on right side of the respective controls. Please note, this behavior is not observed in Firefox nor is it a problem in Windows-based Chromium browsers.
I have included the following screen shot for illustration purposes:
The screen shot is taken from Google Chrome on a Samsung Galaxy S8+ running Android Pie.
I have validated that the non-selected list is refreshed and options are selectable via the down arrow on the right side of the control. Likewise, after selecting and moving an option, the option is visible in the selected list by tapping on the down arrow on the control.
My constructor for each instance of the plug-in is as follows:
$("#CrewMembers").bootstrapDualListbox({
showFilterInputs: false,
infoText: false,
moveOnSelect: true,
infoTextEmpty: false
});
I am new to Bootstrap Dual Listbox and I would like to continue using it. Any assistance would be greatly appreciated.
UPDATE (7/23/2020):
I replaced the Bootstrap Dual Listbox plug-in with an equivalent jQuery/Javascript plug-in (jQuery Dualselect) and got the same result. This issue appears to reside with Chromium and not the plug-ins.
An issue has been submitted to the Chromium development team.

In IE elements are get hide then after hover on them they get visible

I am working with IE11. After loading my website elements like checkbox, radio button, drop down arrow get automatically hidden then after hover on them they get visible then after click anywhere in page they again get hide. All this element are present and style are applied tested with developer tool but still they was giving problem. Then after check "use software rendering instead of gpu rendering" option from settings->Internet option->Advanced->"use software rendering instead of gpu rendering" everything got ok. Now my website element not getting hide all style applied perfectly. But I doesn't understand why this happen? How this setting fixed issues. Please any idea help!

Selenium clicks on a wrong link (or does not click on a link at all) on certain machines

I am using Selenium WebDriver 2.5.0 (tried 2.13.0, it did not help).
I am trying to click on a link like this:
driver.FindElement(By.PartialLinkText("Customer - Creation").Click();
Before it worked, but I have tried to run the scripts after 3 weeks and
I observe 3 different behaviors on 3 machines:
Machine A: There is no click on the link at all, also there is no error.
Machine B: It clicks a different link! Sometimes one above, sometimes one below.
Machine C (Virtual): It works.
I have not fully tested this (spent half a day today), but did anyone stumble upon such a behaviour?
I have restarted my PC, re-added the Selenium libraries.
"SendKeys(Enter)" helps, but this issue happened not only to links, but to at least radio boxes as well, where "SendKeys(Enter)" does not work.
Please share your thoughts.
Update: Browsers are the same on at least 2 machines, Internet Explorer 8.0
Answered by nebehr.g...#gmail.com at Selenium Issues:
This issue keeps popping up from time to time and is usually returned with request for clarifications. The bottom line is, InternetExplorerDriver calculates coordinates of some objects incorrectly and clicks in the wrong place. One reason for this is zoom value other than 100%; however it is reproducible for some controls for 100% zoom as well.
I suppose it would be helpful if you could create a sample page to demonstrate this issue. In the meantime why don't you use Javascript click() method for offending controls?
http://code.google.com/p/selenium/issues/detail?id=3052
One other thing to check for is the screen resolution (not the desktop resolution but the system level size of text and icons). I have two laptops in my office that are you used for testing, one running Windows 7 and the other running Windows 10. On both, the screen resolution was greater than 100% and Selenium was having problems moving the mouse to the correct location for mouse events like click and hover. As soon as the screen resolution was set to 100%, all mouse actions worked correctly.
Windows 7: http://windows.microsoft.com/en-us/windows7/make-the-text-on-your-screen-larger-or-smaller?v=t
Windows 10: https://superuser.com/questions/951199/windows-10-system-font-size-change
There is a lot of useful info in Andrey's answer and in the Selenium issue he mentions at https://code.google.com/p/selenium/issues/detail?id=3052. Just to tie all those pieces of info together and offer a successful workaround...
I too am experiencing the issue of clicks occurring at the wrong screen coordinates -- four years after the OP first mentioned it! As others have said:
The issue is related to InternetExplorerDriver. I have the problem
when testing IE 9, but not Chrome, Firefox or even IE 8.
As mentioned in the Selenium issue, the website I'm testing uses frames.
I tried several workarounds suggested in this post and elsewhere. All of the following did NOT help:
Updating to the latest InternetExplorerDriver (version 2.47.0)
Maximizing the browser window.
Setting browser zoom to 100%.
Using an action chain, with or without move_by_offset, instead of WebDriver's click() method.
As suggested by Andrey, what DID help is using JavaScript instead of WebDriver's click() method. Here's a line of Python code that does the trick:
driver.execute_script("jQuery('{}').click();".format(css_selector))
This assumes that "driver" is an instance of Selenium WebDriver, and "css_selector" is a string identifying the element you want to click, and that jQuery is loaded.
Sounds like the element isn't present in the page's HTML, but is instead added dynamically once the page is loaded. What happens depends on how fast the machine is and how unique the text is. I'll bet that if you added a long sleep (e.g., a minute) you'd get the same result on all 3 machines. If so, that indicates the single most classic Selenium testing problem - trying to act on pages that aren't complete. You need to find an element to wait on that will guarantee the presence of the link you'd like to click on.
I just had the same issue in FireFox. The zoom was at 100% and the selection was by xpath an certainly correct. Turned out the problem disappeared when I maximized the browerwindow!
code :(python api)
self.driver.maximize_window()

WebBrowser Control is Running into Javascript Error that IE doesn't

If I use IE I can visit the website I want and click the 'Next' button and life is good. If I open that same website using the webBrowser control and click the 'Next button I get a javascript error message.
I'm not doing anything in the code to manipulate the website. My goal, eventually, is to have some level of automation; but at this point, I get the javascript error and a pop-up and it screws everything else.
I can hide the JS error from popping up; by setting 'WebBrowser1.ScriptErrorsSuppressed = True' but the page isn't working because of the error.
The client script might be assuming a full browser is present and trying to access part of the browser outside the Document Object Model (DOM) of the page. For example, maybe the client script is trying to display something on the browser's status bar, or trying to modify a toolbar which isn't available in the WebBrowserControl. There could be numerous similar reasons.
If you do not have write-access to the web page in question to try fixing it, then play with WebBrowser Control properties such as ScriptErrorsSuppressed and ObjectForScripting
Try setting WebBrowser1 Silent property to true.
Actually, you are receiving this problem because when you run your site in IE8 or IE9 on your normal internet explorer desktop app, you are getting either IE8 or IE( rendering, depending on which you have installed. However, with the webbrowser control, unless you take the effort to change soem settings in the registry, the default rendering engine used by the webbrowser control is IE7 (if u have 7, 8 or 9 installed) and IE4 (if you have 4, 5 or 6 installed).
This is why you are having the problem, if you want help changing the rendering engine version for your webbrowser control, do a google search as there are many examples on SO, and i have provided this answer in some of my previous posts on this tag/topic. feel free to search or ask me.
Let me know how you go.