\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Narayanan Palani (Narayanan Palani)}
\pdfinfo{
  /Title (cypressio.pdf)
  /Creator (Cheatography)
  /Author (Narayanan Palani (Narayanan Palani))
  /Subject (Cypressio Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Cypressio Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Narayanan Palani (Narayanan Palani)} via \textcolor{DarkBackground}{\uline{cheatography.com/32112/cs/22731/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Narayanan Palani (Narayanan Palani) \\
  \uline{cheatography.com/narayanan-palani} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 10th May, 2020.\\
   Updated 17th February, 2021.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.8 cm} x{5.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Basic Commands}}  \tn
% Row 0
\SetRowColor{LightBackground}
Launch CypressIO & npx cypress open \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Launch URL & cy.visit(url) \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Launch URL with prefix & Update baseUrl in {\bf{cypress.json}} (as a prefix) and use cy.visit(url) \tn 
% Row Count 6 (+ 3)
% Row 3
\SetRowColor{white}
Make HTTP Request & cy.request(url) \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.08 cm} x{3.92 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Element Interactions}}  \tn
% Row 0
\SetRowColor{LightBackground}
Click Event & .click() \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Double Click Event & .dblclick() \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Right Click Event & .rightclick() \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
Input on Text Box Fields & .type(text) \tn 
% Row Count 5 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Clear Event & .clear() \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
Check on Checkboxes & .check() \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
Uncheck on Checkboxes & .uncheck() \tn 
% Row Count 9 (+ 2)
% Row 7
\SetRowColor{white}
Select from Dropdowns & .select(value) \tn 
% Row Count 11 (+ 2)
% Row 8
\SetRowColor{LightBackground}
Mouse-Down & \seqsplit{.trigger('mousedown')} \tn 
% Row Count 13 (+ 2)
% Row 9
\SetRowColor{white}
Mouse-Up & \seqsplit{.trigger('mouseup')} \tn 
% Row Count 14 (+ 1)
% Row 10
\SetRowColor{LightBackground}
Mouse-Leave & \seqsplit{.trigger('mouseleave')} \tn 
% Row Count 16 (+ 2)
% Row 11
\SetRowColor{white}
Mouse-Move & \seqsplit{.trigger('mousemove')} \tn 
% Row Count 18 (+ 2)
% Row 12
\SetRowColor{LightBackground}
Mouse-Over & \seqsplit{.trigger('mouseover')} \tn 
% Row Count 20 (+ 2)
% Row 13
\SetRowColor{white}
Focus on an object & .focus() \tn 
% Row Count 21 (+ 1)
% Row 14
\SetRowColor{LightBackground}
Debug on a click event & .debug().click() \tn 
% Row Count 23 (+ 2)
% Row 15
\SetRowColor{white}
Force Click & .click(\{ force: true \}) \tn 
% Row Count 25 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.48 cm} x{5.52 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Installaton of cypress-test-techniques}}  \tn
% Row 0
\SetRowColor{LightBackground}
Basic Tools Needed & Nodejs (version 10 or above),Gitbash,Visual Studio Code (or any IDE) \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Step1 & npm install \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Step2 & npm link \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
Step3 & npm link \seqsplit{cypress-cucumber-preprocessor} \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Step4 & npm install through \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Extensions}}  \tn
% Row 0
\SetRowColor{LightBackground}
Cypress Image Snapshot & \seqsplit{https://www.npmjs.com/package/cypress-image-snapshot} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Percy (Visual Testing \& Review) & \seqsplit{https://docs.percy.io/docs/cypress} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{cypress-skip-and-only-ui} & \seqsplit{https://www.npmjs.com/package/cypress-skip-and-only-ui} \tn 
% Row Count 8 (+ 3)
% Row 3
\SetRowColor{white}
\seqsplit{cypress-watch-and-reload} & \seqsplit{https://www.npmjs.com/package/cypress-watch-and-reload} \tn 
% Row Count 11 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{cypress-testing-library} & \seqsplit{https://www.npmjs.com/package/@testing-library/cypress} \tn 
% Row Count 14 (+ 3)
% Row 5
\SetRowColor{white}
\seqsplit{cypress-file-upload} & \seqsplit{https://www.npmjs.com/package/cypress-file-upload} \tn 
% Row Count 17 (+ 3)
% Row 6
\SetRowColor{LightBackground}
Cypress Reportportal & \seqsplit{https://github.com/reportportal/agent-js-cypress} \tn 
% Row Count 20 (+ 3)
% Row 7
\SetRowColor{white}
Cypress Drag and Drop & \seqsplit{https://github.com/4teamwork/cypress-drag-drop} \tn 
% Row Count 23 (+ 3)
% Row 8
\SetRowColor{LightBackground}
Cypress iframe & \seqsplit{https://gitlab.com/kgroat/cypress-iframe} \tn 
% Row Count 25 (+ 2)
% Row 9
\SetRowColor{white}
Cypress Xpath & \seqsplit{https://github.com/cypress-io/cypress-xpath} \tn 
% Row Count 27 (+ 2)
% Row 10
\SetRowColor{LightBackground}
Cypress Lighthouse Audit & \seqsplit{https://github.com/mfrachet/cypress-audit} \tn 
% Row Count 29 (+ 2)
% Row 11
\SetRowColor{white}
Cypress Dark (Theme) & \seqsplit{https://github.com/bahmutov/cypress-dark} \tn 
% Row Count 31 (+ 2)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{x{3.52 cm} x{4.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Extensions (cont)}}  \tn
% Row 12
\SetRowColor{LightBackground}
Cypress Docker & \seqsplit{https://github.com/cypress-io/cypress-docker-images} \tn 
% Row Count 3 (+ 3)
% Row 13
\SetRowColor{white}
Cypress Mochawesome Reporter & \seqsplit{https://github.com/LironEr/cypress-mochawesome-reporter} \tn 
% Row Count 6 (+ 3)
% Row 14
\SetRowColor{LightBackground}
Cypress Terminal Report & \seqsplit{https://github.com/archfz/cypress-terminal-report} \tn 
% Row Count 9 (+ 3)
% Row 15
\SetRowColor{white}
Cypress Visual Regression & \seqsplit{https://github.com/mjhea0/cypress-visual-regression} \tn 
% Row Count 12 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{5.52 cm} x{2.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Locator Strategy}}  \tn
% Row 0
\SetRowColor{LightBackground}
CSS Selectors & \seqsplit{cy.get(selector)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Xpath  ({\bf{cypress.xpath}} extension to be installed from \seqsplit{https://github.com/cypress-io/cypress-xpath)} & \seqsplit{cy.xpath(selector)} \tn 
% Row Count 6 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.64 cm} x{3.36 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Variable and Aliases}}  \tn
% Row 0
\SetRowColor{LightBackground}
Variable & const,let,var \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Aliases & \seqsplit{.as('nameTheAliases')} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Run commands before each test & beforeEach() \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.96 cm} x{5.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Errors}}  \tn
% Row 0
\SetRowColor{LightBackground}
Error name & This is the type of the error (e.g. AssertionError, CypressError) \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Error Message & This generally tells you what went wrong. It can vary in length. Some are short like in the example, while some are long, and may tell you exactly how to fix the error. \tn 
% Row Count 10 (+ 7)
% Row 2
\SetRowColor{LightBackground}
Learn More & Some error messages contain a Learn more link that will take you to relevant Cypress documentation. \tn 
% Row Count 14 (+ 4)
% Row 3
\SetRowColor{white}
View Stack Trace & Clicking this toggles the visibility of the stack trace. Stack traces vary in length. \tn 
% Row Count 18 (+ 4)
% Row 4
\SetRowColor{LightBackground}
Print to console button & Click this to print the full error to your DevTools console. This will usually allow you to click on lines in the stack trace and open files in your DevTools \tn 
% Row Count 25 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.96 cm} x{5.04 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Learn}}  \tn
% Row 0
\SetRowColor{LightBackground}
Cypress Documentation & \seqsplit{https://docs.cypress.io/guides/overview/why-cypress.html} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Cypress Test Techniques & \seqsplit{https://engineers-hub.teachable.com/p/cypressio} \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Cypress Book & \seqsplit{https://www.routledge.com/Automated-Software-Testing-with-Cypress/Palani/p/book/9780367699543} \tn 
% Row Count 9 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{4.96 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Record and Playback}}  \tn
% Row 0
\SetRowColor{LightBackground}
Cypress Recorder & \seqsplit{https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Cypress Scenario Recorder & \seqsplit{https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb?hl=en} \tn 
% Row Count 9 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.8 cm} x{5.2 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Browser support}}  \tn
% Row 0
\SetRowColor{LightBackground}
Cypress 4.0.0 or above & Google Chrome,Canary, Mozilla Firefox, Microsoft Edge(Chromium Based),Electron \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Cypress 3.8.3 or below & Google Chrome and Electron \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.2 cm} x{4.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Framework Repositories}}  \tn
% Row 0
\SetRowColor{LightBackground}
Cypress Test Techniques & \seqsplit{https://github.com/narayananpalani/cypress-test-techniques} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Cypress Testing Library & \seqsplit{https://github.com/testing-library/cypress-testing-library} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
Cypress Axe (Accessibility) & \seqsplit{https://github.com/avanslaars/cypress-axe} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
Cypress Code Coverage & \seqsplit{https://github.com/cypress-io/code-coverage} \tn 
% Row Count 10 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Cypress Example API Testing & \seqsplit{https://github.com/cypress-io/cypress-example-api-testing} \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
Cypress Lighthouse Audit & \seqsplit{https://github.com/mfrachet/cypress-audit} \tn 
% Row Count 15 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}