Document how to use TestCafe in WSL

[AndreyBelym]

We should add the following content to our docs:
#1640 (comment)

For the Chrome Linux option, there are several ways to enable GUI testing:
https://medium.com/@dhanar.santika/installing-wsl-with-gui-using-vcxsrv-6f307e96fac0
https://devblogs.microsoft.com/commandline/whats-new-in-the-windows-subsystem-for-linux-september-2020/#gui-apps

[Steven-Beasley]

on windows

choco install vcxsrv

run xlaunch from you desktop keep all the defaults except make sure the Disable Access Control is checked

make note of the routing in the system tray.

Important to remember whatever the last bit is. Mine was :437:0

open up your wsl shell, I was using ubuntu

sudo apt update
sudo apt upgrade -y

install whatever browsers you want to test
install testcafe per normal

testcafe -v
testcafe -b

if you have no browsers or not all the ones you installed then look at my comments below for items that don't show as installed browsers.

in your home directory run

nano .bashrc

add the following lines to the bottom note on the DISPLAY line this is where I added the :437:0
I've only tested this with edge and chrome

alias chrome='google-chrome "$1" &> /dev/null'
alias chrome:headless='google-chrome --disable-gpu --headless "$1" &> /dev/null'
alias edge='microsoft-edge-dev "$1" &> /dev/null'
alias edge:headless='microsoft-edge-dev --disable-gpu --headless "$1" &> /dev/null'
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):437.0

logout login to your shell

sudo su - root -c exit

test out that you can launch chrome or whatever installed browser you are using.

chrome

If the browser doesn't launch most likely it is a firewall issue and you will need to change the windows firewall to allow public for this app.

Installed browser not showing up

Note if you want the edge browser to work you will need to modified the alias.js in /node_modules/testcafe-browser-tools/lib/alias.js
Add the following line under the edge browser detection don't forget the , on the previous line

linuxBinaries: ['microsoft-edge-dev']

install edge

sudo apt install microsoft-edge-dev

test that the browser is detected

testcafe -b

if it all worked then you should see edge in the output

[pogasanov]

Great instruction! One thing, I would rather add you still need to install google chrome on wsl:

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

[illuminatux]

We should add the following content to our docs: [#1640 (comment)]

Hello, is this already added to your docs? I can't find anything about using WSL in your doc...

[AndreyBelym]

Hi @illuminatux, unfortunately, we didn't have time to write an article in our docs. But thanks to an excellent recipe provided by @Steven-Beasley and @pogasanov 🤝 it should be a lot easier now

[illuminatux]

hello @AndreyBelym, sometimes the remote browser does not work, the browser gets stuck on the "connected..." page.

and one problem with the vcxsrv solution is, that at least the "t.maximizeWindow()" does not work. one must also install a window manager to get it working.

i am now using kali-linux on wls2 where all things are already wired up after the installation of win-kex (their embedded vcssrv version). after exporting the DISPLAY variable, one can also use the windows terminal or VS Code console to launch a browser, but i tend to use the kali-linux terminal. just remember to install kali-linux from microsoft store app and dont try "wsl install" ... the later is not up-to-date

... or just try to get windnows 11 ;)