Best JavaScript code snippet using cypress
tictactoe.js
Source:tictactoe.js
1"use babel";2(function (w, d) {3 'use strict';4 const TicTacToe = {5 matrix: [0, 0, 0,6 0, 0, 0,7 0, 0, 0], // 1 = user, -1 = computer, 08 done: false,9 userChoice: 'X',10 computerChoice: 'O',11 currentPlayer: 'user',12 winner: null13 };14 const $gameCellContainer = $('.tictactoe__game');15 const $gameCells = $$('.tictactoe-game__cell', $gameCellContainer);16 const $userChoice = $('.tictactoe__choice');17 const $result = $('.tictactoe__result');18 const init = function () {19 console.log('DOMContentLoaded');20 $('form', $userChoice).addEventListener('change', choiceHandler, false);21 22 startGame();23 };24 25 const startGame = function () {26 $gameCellContainer.addEventListener('click', cellHandler, false);27 $result.textContent = '';28 $gameCellContainer.classList.remove('tictactoe__game--disabled');29 };30 const choiceHandler = function (ev) {31 const selection = ev.target;32 console.log(selection);33 TicTacToe.userChoice = selection.value;34 console.log('User Choice:', TicTacToe.userChoice);35 TicTacToe.computerChoice = TicTacToe.userChoice === 'X' ? 'O' : 'X';36 console.log('Computer Choice:', TicTacToe.computerChoice);37 updateDisplay();38 };39 const cellHandler = function (ev) {40 41 TicTacToe.currentPlayer = 'user';42 43 const cell = ev.target;44 console.log(cell);45 const cellNum = cell.getAttribute('data-cell-num');46 console.log(cellNum);47 // invalid cell clicked48 if(TicTacToe.matrix[cellNum-1]) {49 console.log('Invalid cell clicked');50 return;51 }52 TicTacToe.matrix[cellNum-1] = 1; // user choice53 console.log('Player Choice:', cellNum - 1);54 console.log(TicTacToe.matrix);55 updateDisplay();56 TicTacToe.done = checkWin() || checkPlayability();57 console.log(TicTacToe.done);58 if(TicTacToe.done) {59 endGame();60 return;61 }62 playComputer();63 };64 const endGame = function () {65 disableGame();66 67 switch(TicTacToe.winner) {68 case 'user':69 case 'computer':70 $result.textContent = `Winner: ${TicTacToe.currentPlayer}`;71 break;72 default:73 $result.textContent = 'Draw';74 }75 76 77 setTimeout(function () {78 reset();79 console.log(TicTacToe.matrix);80 updateDisplay();81 startGame();82 }, 5000);83 };84 85 const checkWin = function () {86 let isWin = false;87 const m = TicTacToe.matrix;88 89 90 isWin = m[0] !== 0 && m[0] === m[1] && m[1] === m[2];91 isWin = isWin || (m[3] !== 0 && m[3] === m[4] && m[4] === m[5]);92 isWin = isWin || (m[6] !== 0 && m[6] === m[7] && m[7] === m[8]);93 isWin = isWin || (m[0] !== 0 && m[0] === m[3] && m[3] === m[6]);94 isWin = isWin || (m[1] !== 0 && m[1] === m[4] && m[4] === m[7]);95 isWin = isWin || (m[2] !== 0 && m[2] === m[5] && m[5] === m[8]);96 isWin = isWin || (m[0] !== 0 && m[0] === m[4] && m[4] === m[8]);97 isWin = isWin || (m[2] !== 0 && m[2] === m[4] && m[4] === m[6]);98 99 if(isWin) {100 TicTacToe.winner = TicTacToe.currentPlayer;101 }102 103 return isWin;104 };105 const playComputer = function () {106 107 TicTacToe.currentPlayer = 'computer';108 const remainingIdxs = TicTacToe.matrix.reduce((remainingIdxs, cellNum, idx) => {109 if(!cellNum){110 remainingIdxs.push(idx); 111 }112 return remainingIdxs;113 }, []);114 let rand = Math.floor(Math.random() * remainingIdxs.length);115 TicTacToe.matrix[remainingIdxs[rand]] = -1; // computer choice116 console.log('Computer Choice:', rand);117 console.log(TicTacToe.matrix);118 updateDisplay();119 TicTacToe.done = checkWin() || checkPlayability();120 console.log(TicTacToe.done);121 if(TicTacToe.done) {122 endGame();123 return;124 }125 };126 127 const disableGame = function () {128 $gameCellContainer.removeEventListener('click', cellHandler, false);129 $gameCellContainer.classList.add('tictactoe__game--disabled');130 };131 const checkPlayability = () => TicTacToe.matrix.every(Boolean);132 const updateDisplay = function () {133 // console.log($gameCells);134 $gameCells.forEach((cell) => {135 const cellNum = cell.getAttribute('data-cell-num');136 137 switch(TicTacToe.matrix[cellNum-1]) {138 case -1: cell.textContent = TicTacToe.computerChoice; break;139 case 1: cell.textContent = TicTacToe.userChoice; break;140 default: cell.textContent = '';141 }142 143 });144 };145 const reset = function () {146 TicTacToe.matrix = [0, 0, 0,147 0, 0, 0,148 0, 0, 0];149 TicTacToe.done = false;150 TicTacToe.winner = null;151 };152 $.ready().then(init);...
Playground.js
Source:Playground.js
1import React, { Component } from "react";2import Button from "./Button";3import HandSelection from "./HandSelection";4import HandTemplate from "./HandTemplate";5import "./styles/Playground.css";6class Playground extends Component {7 constructor(props) {8 super(props);9 // Refs10 this.rootRef = React.createRef();11 // State Object12 this.state = {13 hands: ["rock", "scissors", "paper"],14 isWin: false,15 randomHand: 0,16 myHand: 0,17 };18 // Binding Methods19 this.PlayAgainClicked = this.PlayAgainClicked.bind(this);20 }21 PlayAgainClicked() {22 window.location.reload();23 }24 componentDidMount() {25 let current = this.rootRef.current;26 let computerHand = current.querySelector("#playground-computer-hand");27 let resultContainer = current.querySelector("#playground-middle");28 let isWin = false;29 this.setState(30 {31 randomHand: Math.floor(Math.random() * 2),32 myHand: this.state.hands.indexOf(this.props.selection),33 },34 () => {35 setTimeout(() => {36 computerHand.style.opacity = "1";37 let temp = this.state.myHand !== 2 ? this.state.myHand + 1 : 0;38 let storage = localStorage;39 let score = parseInt(storage.getItem("score"));40 let scoreNumber = document.querySelector("#score-number");41 let left = document.getElementById("playground-left");42 let right = document.getElementById("playground-right");43 44 if (this.state.myHand !== this.state.randomHand) {45 if (temp === this.state.randomHand) isWin = true;46 else isWin = false;47 } else isWin = undefined;48 if (isWin === true) {49 score += 2;50 storage.setItem("score", score);51 scoreNumber.innerText = score;52 left.style.zIndex = "1";53 }54 else if (isWin === false)55 { 56 score = score - 2 < 0 ? 0 : score - 2;57 storage.setItem("score", score);58 scoreNumber.innerText = score;59 right.style.zIndex = "0";60 }61 this.setState({ isWin: isWin }, () => {62 resultContainer.style.display = "flex";63 });64 }, 1500);65 }66 );67 }68 componentDidUpdate() {}69 UNSAFE_componentWillReceiveProps(newPro) {}70 render() {71 return (72 <div73 className="playground-container"74 id={this.props.id}75 ref={this.rootRef}76 onClick={this.props.onClick}77 onMouseDown={this.props.onMouseDown}78 onMouseUp={this.props.onMouseUp}79 onMouseOver={this.props.onMouseOver}80 style={this.props.style}81 >82 <div id="playground-left">83 <label className="playground-label">You Picked</label>84 <HandTemplate85 id="playground-my-hand"86 type={this.props.selection}87 isWin={88 this.state.isWin === true89 ? this.state.isWin90 : this.state.isWin === false91 ? this.state.isWin92 : false93 }94 />95 </div>96 <div id="playground-middle">97 <label>98 {this.state.isWin === true99 ? "You Win"100 : this.state.isWin === false101 ? "You Lose"102 : "Draw"}103 </label>104 <Button105 text="Play Again"106 onClick={this.PlayAgainClicked}107 style={{108 color:109 this.state.isWin === true110 ? "var(--score-txt-cr)"111 : this.state.isWin === false112 ? "hsl(349, 71%, 52%)"113 : "Black",114 }}115 />116 </div>117 <div id="playground-right">118 <label className="playground-label">The House Picked</label>119 <div id="playground-right-cirlce"></div>120 <HandTemplate121 id="playground-computer-hand"122 type={this.state.hands[this.state.randomHand]}123 isWin={124 this.state.isWin === true125 ? !this.state.isWin126 : this.state.isWin === false127 ? !this.state.isWin128 : false129 }130 />131 </div>132 </div>133 );134 }135}...
calculateWinner.js
Source:calculateWinner.js
1export function calculateWinner(squares) {2 let isWin;3 let squareToWin = 5;4 for (let i = 0; i < squares.length; i++) {5 for (let j = 0; j < squares[i].length; j++) {6 if (!squares[i][j]) continue;7 if (j <= squares[i].length - squareToWin) {8 isWin = true;9 for (let k = 0; k < squareToWin - 1; k++) {10 if (squares[i][j + k] !== squares[i][j + k + 1]) {11 isWin = false12 }13 }14 if (j> 0 && squares[i][j - 1] && squares[i][j] !== squares[i][j - 1] && squares[i][j + squareToWin + 1] !== squares[i][j + squareToWin]) {15 isWin = false;16 }17 if (squares[i][j] === squares[i][j + squareToWin] || (squares[i][j - 1] && squares[i][j] === squares[i][j - 1])){18 isWin=false;19 }20 if (isWin) return { val: squares[i][j] };21 }22 if (i <= squares.length - squareToWin) {23 isWin = true;24 for (let k = 0; k < squareToWin - 1; k++) {25 if (squares[i+k][j] !== squares[i+k+1][j]) {26 isWin = false27 }28 }29 if (i>0 && squares[i - 1][j] && squares[i][j] !== squares[i - 1][j] && squares[i + squareToWin + 1][j] !== squares[i + squareToWin][j]) {30 isWin = false;31 }32 33 if (isWin) return { val: squares[i][j] };34 }35 if (i <= squares.length - squareToWin && j <= squares[i].length - squareToWin){36 isWin = true;37 for (let k = 0; k < squareToWin - 1; k++) {38 if (squares[i + k][j+k] !== squares[i + k + 1][j+k+1]) {39 isWin = false40 }41 }42 if (i> 0 && j> 0 && squares[i - 1][j - 1] && squares[i][j] !== squares[i - 1][j - 1] && squares[i + squareToWin + 1][j + squareToWin + 1] !== squares[i + squareToWin][j + squareToWin]) {43 isWin = false;44 }45 46 if (isWin) return { val: squares[i][j] };47 }48 if (i <= squares.length - squareToWin && j >= squareToWin-1){49 isWin = true;50 for (let k = 0; k < squareToWin - 1; k++) {51 if (squares[i + k][j - k] !== squares[i + k + 1][j - k - 1]) {52 isWin = false53 } 54 }55 if (i > 0 && squares[i - 1][j + 1] && squares[i][j] !== squares[i - 1][j + 1] && squares[i + squareToWin + 1][j - squareToWin - 1] !== squares[i + squareToWin][j - squareToWin]) {56 isWin = false;57 }58 if (isWin) return { val: squares[i][j] };59 }60 }61 }62 return null;...
script.js
Source:script.js
1let x = true;2const cells = document.getElementsByTagName("td");3for (let i = 0; i < cells.length; i++) {4 const cell = cells[i];5 cell.onClick = (event) => {6 if (event.target.innerHTML == "") {7 event.target.innerHTML =8 (x && `<span class="x">X</span>`) || `<span class="o">O</span>`;9 x != x10 }11 };12}13// const winCombinations = [14// [0, 1, 2, 3],15// [4, 5, 6, 7],16// [8, 9, 10, 11],17// [12, 13, 14, 15],18// [0, 4, 8, 12],19// [1, 5, 9, 13],20// [2, 6, 10, 14],21// [3, 7, 11, 15],22// [0, 5, 10, 15],23// [3, 6, 9, 12]24// ];25// const checkVariant = (a, b, c, d) => {26// if (27// cells[a].innerHTML != "" &&28// cells[a].innerHTML == cells[b].innerHTML &&29// cells[a].innerHTML == cells[c].innerHTML &&30// cells[a].innerHTML == cells[d].innerHTML31// ) {32// return cells[0].children[0].innerHTML;33// } else return false;34// };35// const checkWinner = () => {36// let isWin = checkVariant(0, 1, 2, 3, 4);37// if (isWin != false) return isWin;38// isWin = checkVariant(4, 5, 6, 7);39// if (isWin != false) return isWin;40// isWin = checkVariant(8, 9, 10, 11);41// if (isWin != false) return isWin;42// isWin = checkVariant(12, 13, 14, 15);43// if (isWin != false) return isWin;44// isWin = checkVariant(0, 4, 8, 12);45// if (isWin != false) return isWin;46// isWin = checkVariant(1, 5, 9, 13);47// if (isWin != false) return isWin;48// isWin = checkVariant(2, 6, 10, 14);49// if (isWin != false) return isWin;50// isWin = checkVariant(3, 7, 11, 15);51// if (isWin != false) return isWin;52// isWin = checkVariant(0, 5, 10, 15);53// if (isWin != false) return isWin;54// isWin = checkVariant(3, 6, 9, 12);55// if (isWin != false) return isWin;...
Using AI Code Generation
1const isHeadless = Cypress.isBrowser('electron') && Cypress.config('headless')2const isBrowser = Cypress.isBrowser('chrome')3const isBrowser = Cypress.isBrowser('firefox')4const isBrowser = Cypress.isBrowser('edge')5const isBrowser = Cypress.isBrowser('electron')6const isBrowser = Cypress.isBrowser('ie')7const isBrowser = Cypress.isBrowser('brave')8const isBrowser = Cypress.isBrowser('chromium')9const isBrowser = Cypress.isBrowser('canary')10const isBrowser = Cypress.isBrowser('safari')11const isBrowser = Cypress.isBrowser('opera')12const isBrowser = Cypress.isBrowser('ios')13const isBrowser = Cypress.isBrowser('android')14const isBrowser = Cypress.isBrowser('electron')15const isBrowser = Cypress.isBrowser('firefox')16const isBrowser = Cypress.isBrowser('edge')17const isBrowser = Cypress.isBrowser('electron')18const isBrowser = Cypress.isBrowser('ie')19const isBrowser = Cypress.isBrowser('brave')20const isBrowser = Cypress.isBrowser('chromium')
Using AI Code Generation
1describe('My First Test', function() {2 it('Does not do much!', function() {3 cy.contains('type').click()4 cy.url().should('include', '/commands/actions')5 cy.get('.action-email')6 .type('
Using AI Code Generation
1if (Cypress.isWin) {2} else {3}4if (Cypress.isWin) {5} else {6}7if (Cypress.isWin) {8} else {9}10if (Cypress.isWin) {11} else {12}13if (Cypress.isWin) {14} else {15}
Using AI Code Generation
1if (isWin) {2} else {3}4if (isChrome) {5} else {6}7const isMobile = Cypress.config('viewportWidth') < 10008if (isMobile) {9} else {10}
Using AI Code Generation
1if (isWin) {2 cy.log('This is a Windows machine')3} else {4 cy.log('This is a non-Windows machine')5}6if (isMac) {7 cy.log('This is a Mac machine')8} else {9 cy.log('This is a non-Mac machine')10}11if (isLinux) {12 cy.log('This is a Linux machine')13} else {14 cy.log('This is a non-Linux machine')15}16if (is64bit) {17 cy.log('This is a 64 bit machine')18} else {19 cy.log('This is a 32 bit machine')20}21if (is32bit) {22 cy.log('This is a 32 bit machine')23} else {24 cy.log('This is a 64 bit machine')25}26var isHeadless = Cypress.isBrowser('electron') && Cypress.config('headless')27if (isHeadless) {28 cy.log('This is a headless mode')29} else {30 cy.log('This is a non-headless mode')31}32var isBrowser = Cypress.isBrowser('chrome')33if (isBrowser) {34 cy.log('This is a chrome browser')35} else {36 cy.log('This is a non-chrome browser')37}38var isBrowser = Cypress.isBrowser('firefox')39if (isBrowser) {40 cy.log('This is a firefox browser')41} else {42 cy.log('This is a non-firefox browser')43}44var isBrowser = Cypress.isBrowser('edge')45if (isBrowser) {46 cy.log('This is a edge browser')47} else {48 cy.log('This is a non-edge browser')49}
Using AI Code Generation
1var os = require('os');2if (os.platform() === 'win32') {3 console.log('This is Windows');4}5else {6 console.log('This is not Windows');7}8if (Cypress.platform === 'win32') {9 console.log('This is Windows');10}11else {12 console.log('This is not Windows');13}14if (Cypress.platform === 'darwin') {15 console.log('This is Mac');16}17else {18 console.log('This is not Mac');19}20if (Cypress.platform === 'linux') {21 console.log('This is Linux');22}23else {24 console.log('This is not Linux');25}26if (Cypress.isHeadless) {27 console.log('This is headless mode');28}29else {30 console.log('This is not headless mode');31}32if (Cypress.isBrowser('chrome')) {33 console.log('This is chrome browser');34}35else {36 console.log('This is not chrome browser');37}38if (Cypress.isBrowser('electron')) {39 console.log('This is electron browser');40}41else {42 console.log('This is not electron browser');43}44if (Cypress.isBrowser('firefox')) {45 console.log('This is firefox browser');46}47else {48 console.log('This is not firefox browser');49}50if (Cypress.isBrowser('edge')) {51 console.log('This is edge browser');52}53else {54 console.log('This is not edge browser');55}56if (Cypress.isBrowser('brave')) {57 console.log('This is brave browser');58}59else {60 console.log('This is not brave browser');61}62if (Cypress.isBrowser('opera')) {63 console.log('This is opera browser');64}65else {66 console.log('This is not opera browser');67}68if (Cypress.isBrowser('safari
Using AI Code Generation
1const isWin = require('cypress/lib/util/isWin')2const isWindows = isWin()3describe('My First Test', function() {4 it('Does not do much!', function() {5 cy.contains('type').click()6 cy.url().should('include', '/commands/actions')7 cy.get('.action-email')8 .type('
Using AI Code Generation
1const path = require('path')2const fs = require('fs')3const util = require('util')4const readFile = util.promisify(fs.readFile)5const getFilePath = () => {6 ? path.join('cypress', 'fixtures', 'data.json')7 : path.join('cypress', 'fixtures', 'data.json')8}9describe('My Test', () => {10 it('works', () => {11 const filePath = getFilePath()12 return readFile(filePath, 'utf8').then((text) => {13 })14 })15})16const path = require('path')17const fs = require('fs')18const util = require('util')19const readFile = util.promisify(fs.readFile)20const getFilePath = () => {21 ? path.join('cypress', 'fixtures', 'data.json')22 : path.join('cypress', 'fixtures', 'data.json')23}24describe('My Test', () => {25 it('works', () => {26 const filePath = getFilePath()27 return readFile(filePath, 'utf8').then((text) => {28 })29 })30})31const path = require('path')32const fs = require('fs')33const util = require('util')34const readFile = util.promisify(fs.readFile)35const getFilePath = () => {36 ? path.join('cypress', 'fixtures', 'data.json')37 : path.join('cypress', 'fixtures', 'data.json')38}39describe('My Test', () => {40 it('works', () => {41 const filePath = getFilePath()42 return readFile(filePath, 'utf8').then((text) => {43 })44 })45})
Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.
You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.
Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.
Get 100 minutes of automation test minutes FREE!!