diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx
index ef75c17..0ba6674 100644
--- a/frontend/src/Router.jsx
+++ b/frontend/src/Router.jsx
@@ -40,6 +40,7 @@ import HelpResourcesGit from './page/Help/HelpResourcesGit';
import HelpResourcesNetwork from './page/Help/HelpResourcesNetwork';
import HelpResourcesHtmlCss from './page/Help/HelpResourcesHtmlCss';
import HelpResourcesJavascript from './page/Help/HelpResourcesJavascript';
+import HelpResourcesCypress from './page/Help/HelpResourcesCypress';
import HelpResourcesReact from './page/Help/HelpResourcesReact';
import LogoutAction from './component/LogoutAction';
@@ -92,6 +93,7 @@ const Router = () => {
} />
} />
} />
+ } />
} />
diff --git a/frontend/src/page/Help/HelpResources.jsx b/frontend/src/page/Help/HelpResources.jsx
index c2953d1..6505dae 100644
--- a/frontend/src/page/Help/HelpResources.jsx
+++ b/frontend/src/page/Help/HelpResources.jsx
@@ -28,6 +28,11 @@ const HelpResources = ({ }) => {
icon: ,
subRoute: 'reactjs',
},
+ {
+ title: 'Cypress',
+ icon: ,
+ subRoute: 'cypress',
+ },
/*{
title: 'Git',
icon: ,
diff --git a/frontend/src/page/Help/HelpResourcesCypress.jsx b/frontend/src/page/Help/HelpResourcesCypress.jsx
new file mode 100644
index 0000000..8f9b70a
--- /dev/null
+++ b/frontend/src/page/Help/HelpResourcesCypress.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+
+import makePage from '../../component/makePage';
+
+import { Body, H3, H5, HR, Code, Example } from '../../component/StyleComponents';
+
+const ResourcesCypress = ({}) => {
+ return (
+ <>
+
+ Running Cypress in Windows Subsystem for Linux (WSL2)
+
+ The new WSL should support a GUI natively according to Gui-apps Guide by Microsoft. However, if you still cannot open Cypress or you received the following:
+
+ The test runner unexpectedly exited via a close event with signal SIGABRT
+
+ as a line of Cypress output. The following setup could be helpful for resolving your issue.
+
+ Note: Before executing any command, please be sure to read and understand it. You should review any shell script provided by anyone before blindly running it.
+
+ Dependencies
+
+ First we need to open a WSL2 (default as Ubuntu) terminal, and type in
+
+
+{`sudo apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
+ libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
+ x11-apps build-essential ca-certificates libcurl3-gnutls \
+ libcurl4 libcurl4-openssl-dev`}
+{`mkdir ~/bin`}
+{`echo "export PATH=~/bin:\$PATH" >> ~/.bashrc`}
+
+
+ into your shell. These are the packages we need.
+
+ Download and Install X-server
+
+ We need to have an X-server to display GUI from the Linux subsystem.
+
+ There are a variety of X-servers available, here we are going to use VcXsrv. You can use any other similar tool.
+
+ Setup $DISPLAY Environment Variable and d-bus
+
+ Open your .bashrc (or equivalent such as .zshrc if you are using zsh) by using
+
+ nano .bashrc
+
+ in your shell, set the $DISPLAY environment variable by adding the following command:
+
+
+{`# set DISPLAY variable to the IP automatically assigned to WSL2
+export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0`}
+
+
+ And also add the below line of code as well to allow internal communicate for VcXsrv GUI.
+
+ /etc/init.d/dbus start &> /dev/null
+
+ You could easily verify $DISPLAY by echo.
+
+
+{`echo $DISPLAY
+# Output should look like: 172.26.64.1:0.0`}
+
+
+ Now linux user needs to be granted access to d-bus without a password. To do so, we need to use visido.
+
+
+{`sudo visudo -f /etc/sudoers.d/dbus`}
+
+
+ This command above will open a new editor, add the following line with your username and save file.
+
+
+ {` ALL = (root) NOPASSWD: /etc/init.d/dbus`}
+
+
+ You could obtain your username by running
+
+
+ {`whoami`}
+
+
+ Start X-server
+
+ Open your start menu, type in Xlaunch and open it.
+
+ Config:
+
+ - Select display settings:
Multiple Windows(default), Click Next Step
+ - Select how to start clients:
Start no client(default), Click Next Step
+ - Extra settings: Check
Disable access control, Uncheck Native opengl, Click Next Step
+ - Save configuration on startup folder, location:
%AppData%\Microsoft\Windows\Start Menu\Programs\Startup
+
+
+
+
+ IMPORTANT: You need to keep your X-server running while you are using any GUI-app like cypress!
+
+
+ Add permission in Windows Defender Firewall
+
+ Go to Control Panel {`>`} System and Security > Windows Defender Firewall > Inbound Rules > New Rule. Or you could open start menu, open `run`, then type in `%windir%\system32\WF.msc` in `run`'s interface.
+
+ Right-Click Inbound Rules -{`>`} New Rule...
+
+ - Rule Type: Program
+ - Program -{`>`} This Program Path: browse and select path to `vcxsrv.exe`.
+ - Action: Allow the Connection
+ - Profile: Check all
+ - Name: VcXsrv
+
+
+
+ Running the tests
+
+ Now you should be able to use cypress by npx cypress open for npm, or yarn run cypress open for yarn.
+
+ You may want to consider adding
+
+
+{`{
+ "scripts": {
+ "cypress:open": "cypress open"
+ }
+}`}
+
+
+ into your package.json file.
+
+
+ );
+};
+
+export default makePage(ResourcesCypress, {
+ loginRequired: true,
+ title: 'Cypress Resources',
+});