I'm testing my Rails project and there are some problems when the test is running.
cucumber features/test.feature
I have installed chromedriver for WSL2 and the test can run fine. However, the browser showing up is not rendered at all, it only has a border and transparent body like this.
I can still open google-chrome and it is displayed correctly. And the project used to work on WSL1. I can also take screenshots when testing, it's just that the browser's UI is not rendered.
I have installed the driver for GPU as stated in the WSL guide but the problem still persisted.
Has anyone encountered this problem and how can I fix it? Thank you very much.
Related
Background
I have a makefile which fetches and spins up a Dockerized Mediawiki instance on my local machine, from scratch, with a single make command:
https://gitlab.wikimedia.org/mhurd/mediawiki-docker-make
This works fairly well. Please try it!
Goal
I'd also like to be able to run Mediawiki's Selenium tests (as-is) in Docker containers and watch them execute "live", with the makefile, again, making it easy to kick this process off.
Approach
This work-in-progress branch adds a container for running Mediawiki Selenium tests, and a browserless-chrome container so you can watch and debug the tests "live", as they run:
https://gitlab.wikimedia.org/mhurd/mediawiki-docker-make/-/tree/selenium
As you can see from the top of this branch's readme, after running make to spin everything up, running make runseleniumtests kicks the tests off. When doing so a browser window is automatically opened which lets you see the Selenium tests which are running in the browserless-chrome container. This works... to a point.
Problem
Unfortunately, after a few tests are seen to be running, I'm seeing this error:
Protocol error (Input.dispatchMouseEvent): Target closed.
I suspect the way the browserless-chrome container manages its Chrome sessions may be to blame, as it appears the error is happening when a test causes a new page to be loaded, but I'm not sure.
Any ideas appreciated, and please try it yourself - the whole point of the makefile is to make spinning this up from scratch super simple. It only takes a couple commands and you should be able to see the tests running and the resulting error. Thanks!
Misc
Running curl -s http://127.0.0.1:3000/sessions | python3 -m json.tool on the host machine after attempting to run the tests shows there are multiple browserless-chrome sessions, but I'm unsure how to make it behave more like a non-dockerized setup - which has no problem with tests which cause page loads.
In email communication with Browserless support, they mention seeing similar issues but haven't been able to track down why:
It seems to be that the root cause may be due to "click" events aren't
working properly when your viewing the live debugger. Can you confirm
that if you don't open the live viewer, it allows the test to progress
and eventually throws new errors regarding selectors not being found? (Edit: I did)
I've also run into this live debugger behavior before and in my
experience I stopped watching the live debugger, and since I couldn't
see which selector it wasn't finding I exported a screenshot and in
that particular case, it ended up being an issue with my viewport,
since the viewport in the remote session was smaller, the styles
rendered differently then locally on my machine, when I set the
viewport size, the selectors were found - but then again, that was my
particular issue, might not be yours.
But yes, for some odd reason when you view live sessions, you can run
into this odd issue which we haven't been able to understand.
I have automated browser tests using puppeteer. I ran them at Circle CI using default Circle CI windows machine. Now I'm trying to change to a docker which is based on a Microsoft Debian machine (the website is .NET). I installed chromium at this machine. The problem is the CSS is not rendered. I used page.on request/response and the css is requested, response is 200. I looked for a configuration that could be disabled, but I didn't find it - neither at StackOverflow.
Repository: https://github.com/darakeon/dfm/
Branch right now: 4.1.5.0 (it will be promoted to master when I finish the version)
The dockerfile is inside docker folder. It is at Docker Hub too, my user is darakeon. Right now the name is darakeon/net-circleci. When I solve the problem, I will rename this, to split into 2 different machines - one based on microsoft which has only libman, another based on the first, that can run puppeteer too.
Tests folder: site/Tests/Browser
Script I'm using to run tests: .circleci/browser/run-tests.sh
The most time you spent trying to solve something, the more ridiculous will be the solution. Please, call me idiot, but help me to solve this...
Discovered the problem. Here is how:
I used page.screenshot at another site on the web to check if the css was rendering at it. It was. Weird. After looking for solutions, I was always finding people teaching how to NOT show the css, intercepting the request and stopping it. So I intercepted the requests to see if the css was being requested:
await page.setRequestInterception(true);
page.on('request', (req) => {
console.log(req.url(), req.resourceType())
req.continue();
})
Given the requests were ok, I went to check the responses:
page.on('response', (r) => {
if (r.status() >= 400)
console.error(r.url(), r.status())
})
Surprise! My main css was returning 404. But why, if it worked at windows? Simple. Windows doesn't care if you call Bootstrap, bootstrap, bOOTSTRAP or BoOtStRap, them all will search the same file. Linux consider as right just the exactly same case.
So, when you get your .NET site from windows and put it at Linux, check the cases of everything.
I got a task to update a URL in a test (using Selenium, Java and Chromedriver) to a new URL. The page is the same, just at a new location. This test worked fine with the old URL.
I brought up an instance of Chrome and verified I could access the URL.
Then I changed the URL, committed to git, and ran on our Jenkins machine and it failed. The screenshot said "This site can’t be reached". I told a co-worker that I think the URL must be wrong (though it worked on my desktop without Selenium). He tried it and it loaded fine. I tried it again from a regular Chrome window and it loaded fine. I tried from Eclipse using Selenium and I got the message about the site could not be accessed.
So I ran Eclipse, stopped it right when Chrome came up but hadn't loaded a URL yet. I manually entered the URL (from copy/paste) and got "This site cannot be accessed). Then I brought up a regular Chrome window and pasted the URL in and it loaded fine.
I decided to look for differences. So in my regular Chrome window it was "Version 77.0.3865.120 (Official Build) (64-bit)". I did the same on the version running under Chromedriver and got "Version 77.0.3865.120 (Official Build) (64-bit)". So the same.
I did a search for the latest Chromedriver. It said for version 77 to please use 77.0.3865.40. This was not what I was using. So I downloaded the correct version and thought "surely this will fix it". I verified it was 77.0.3865.40 coming up. But, as you guessed it, I got the same problem after updating to the most compatible Chromedriver.
Some searches said that basically nothing would be able to tell, but there was one property that Chromedriver inserts. I don't know whether this would be enough to block a session using Chromedriver?
The only thing I can think of is that we have iBoss and possibly iBoss is blocking it? Either that or somehow the site is blocking it.
I would like to share the URL with you but I do not know whether that would be violating company policy. If I get permission, I will share the URLs.
by the way, the error is "ERR TUNNEL CONNECTION FAILED"
Got some internal help to help fix some settings
I've configured docker to reload automatically when i make changes to my project files. It works fine when i make changes in HTML or .py files but does not reflect any changes to CSS files. this question has also been asked here but there is no answer yet. Please help!
I'm using Flask python with gunicorn. Exactly following this course on udemy.
Figured that this error is unpredictable. Its a problem with virtualbox used by Docker. The simplest workaround i found was to run another parallel application which apparently resets virtualbox. Clearing browser cache after doing that solved the problem for me.
While this is just a workaround, if anyone has a clear solution, please share it here.
I had the same problem and solved it using this suggestion by #famelis:
The problem, IMHO, is with the browser. It is using the cache for css and js.
If you are in development environment you can use google chrome and open the programmer's tools (Ctrl+Shift+I)
Then in the Network tab the "Disable cache" must be checked, and this solves the problem.
In production you need to have different paths/names for the files, possibly with version number, for the browser to re-read the files and not use the cache.
Sometimes, when running automated tests in PhantomJS using Cucumber for Rails 4, it would be really, really useful to actually sit in front of my screen, look in a window, and see exactly what the browser is doing.
There are times when your code is right and your test is right, but testing fails intermittently nonetheless. It's often because of a script, or an animation, or some CSS that gets in the way. But seeing a screenshot, drilling into a DOM inspector, or using the debugger is not enough to catch those edge cases.
Is there any way to have a window looking at what PhantomJS is doing in the background? It could be something in X Window, or running in a VNC Server, etc. Anything visual would greatly help with debugging, especially in with those finicky details.
I found a little program called PhantomVNC, but it's not telling me much on how it works. It looks like something just feeding a series of screenshots through VNC.
I tried PhantomJS and Capybara-WebKit, but neither of those headless browsers other a "head" option. Selenium-WebDriver seems complicated to set up and only seems to work with a full browser like Firefox, and that may cause more problems than it solves.
If you have any ideas, please let me know. Thank you in advance.
Not sure specifically about Cuc/Rails - but I specifically have a second chrome/webdriver Virtual Machine for this. I use PhantomJS specifically for the headless automatic acceptance testing, but when there is an issue with the tests and I'm trying to diagnose it can be helpful to view the browser live.
In other words, spin up a Ubuntu desktop VM, install chrome, install selenium server and the chrome webdriver. Log in to the VM, open chrome, make sure selenium is running, then configure your test suite to connect to the selenium webdriver service (usually port :4444) of this instance. Run your tests and you should be able to watch the chrome instance on the VM.