KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use _selectedCell method in Cypress
Best JavaScript code snippet using cypress
data-table.js
Source:data-table.js 
1'use babel';2import Clusterize from "clusterize.js"3export default class DataTable {4 constructor(targetQuery, {columns, data, id}) {5 Object.assign(this, {columns, data, id});6 this._lastRowIndex = "0";7 this._selectedCell = undefined;8 this._resizeObserver = undefined;9 this._element = document.createElement('div');10 this._element.id = `${this.id}-scroll-area`;11 this._element.classList.add('clusterize-scroll');12 this._element.addEventListener('keyup', (e)=>document.execCommand('copy'));13 let table = document.createElement("table");14 table.appendChild(this._getColumnsElement());15 table.onkeydown = (e)=>this._onTableKeyPress(e);16 this._tBody = document.createElement("tbody");17 this._tBody.id = `${this.id}-content-area`;18 this._tBody.classList.add('clusterize-content');19 this._tBody.onclick = (el)=>{20 if (el.target && el.target.tagName === 'TD' && !el.target.classList.contains('dbex-col-index')) {21 this._changeSelectedCell(el.target)22 }23 };24 table.appendChild(this._tBody);25 this._element.appendChild(table);26 let target = document.querySelector(targetQuery);27 target.innerHTML = "";28 target.appendChild(this._element);29 this._makeColsResizable(document.querySelector(`#${this._element.id} > table`));30 this._clusterize(table);31 this._changeSelectedCell(table.getElementsByClassName('dbex-selected-cell')[0]);32 }33 _clusterize(table) {34 this.clusterize = new Clusterize({35 rows: this._generateDataRowsEl(),36 scrollId: this._element.id,37 contentId: this._tBody.id,38 callbacks: {39 clusterWillChange: (e)=>{40 let selectedCell = table.getElementsByClassName('dbex-selected-cell')[0];41 if (selectedCell) {42 this._lastRowIndex = selectedCell.closest('tr').dataset.row;43 this._lastColIndex = this._getSelectedColIndex(selectedCell);44 selectedCell.classList.remove('dbex-selected-cell');45 }46 },47 clusterChanged: (e)=>{48 let row = table.querySelectorAll(`[data-row="${this._lastRowIndex}"] > td`)[this._lastColIndex];49 if (row) {50 row.classList.add('dbex-selected-cell');51 this._changeSelectedCell(row);52 }53 },54 }55 });56 }57 _makeColsResizable(table) {58 table.querySelectorAll('th').forEach((col) => {59 this._setColumnAsResizable(col, col.querySelector('.resizer'));60 });61 }62 _setColumnAsResizable(col, resizer) {63 let clientStartPos = 0;64 let elementWidth = 0;65 let onMouseDown = function(e) {66 clientStartPos = e.clientX;67 elementWidth = parseInt(window.getComputedStyle(col).width, 10);68 document.addEventListener('mousemove', onMouseMove);69 document.addEventListener('mouseup', onMouseUp);70 };71 let onMouseMove = function(el) {72 let newWidth = el.clientX - clientStartPos;73 col.style.minWidth = `${elementWidth + newWidth}px`;74 };75 let onMouseUp = function() {76 document.removeEventListener('mousemove', onMouseMove);77 document.removeEventListener('mouseup', onMouseUp);78 };79 resizer.addEventListener('mousedown', onMouseDown);80 }81 _changeSelectedCell(cellToSelect, scrollBlock = 'nearest') {82 if (!cellToSelect) {83 return;84 }85 if (this._selectedCell) {86 this._selectedCell.classList.remove("dbex-selected-cell");87 this._selectedCell.parentElement.classList.remove("dbex-selected-row");88 }89 this._selectedCell = cellToSelect;90 this._selectedCell.classList.add("dbex-selected-cell")91 this._selectedCell.parentElement.classList.add("dbex-selected-row");92 this._selectedCell.scrollIntoView({block: scrollBlock});93 this._selectedCell.focus();94 this._bringCellToVisible();95 }96 _bringCellToVisible() {97 let visibleEdges = this._tBody.closest('.result-data').getBoundingClientRect();98 let limitTop = visibleEdges.top;99 let cellVisible = this._selectedCell.getBoundingClientRect();100 let headerHeight = cellVisible.height;101 let colIndexWidth = this._selectedCell.parentElement.firstChild.getBoundingClientRect().width;102 let limitLeft = visibleEdges.left;103 if (cellVisible.top < (limitTop + headerHeight)) {104 this._element.scroll(this._element.scrollLeft, this._element.scrollTop - headerHeight);105 }106 if (cellVisible.left < (limitLeft + colIndexWidth)) {107 this._element.scroll(this._element.scrollLeft - colIndexWidth, this._element.scrollTop);108 }109 }110 _onTableKeyPress(event) {111 let keyPressed = event ? event.key : window.event.key;112 let nextCell, scrollBlock;113 if (keyPressed == 'ArrowUp') {114 let nextRow = this._selectedCell.parentElement.previousElementSibling;115 if (nextRow != null && nextRow.cells.length > 0) {116 nextCell = nextRow.cells[this._selectedCell.cellIndex];117 scrollBlock = nextCell.parentElement.dataset.row === "0" ? 'end' : 'nearest';118 }119 } else if (keyPressed == 'ArrowDown') {120 let nextRow = this._selectedCell.parentElement.nextElementSibling;121 if (nextRow != null) {122 nextCell = nextRow.cells[this._selectedCell.cellIndex];123 }124 } else if (keyPressed == 'ArrowLeft') {125 let sibling = this._selectedCell.previousElementSibling;126 if (!sibling) {127 return;128 }129 if (!sibling.classList.contains('dbex-col-index')) {130 nextCell = sibling;131 } else {132 this._element.scrollLeft -= sibling.offsetWidth;133 }134 } else if (keyPressed == 'ArrowRight') {135 nextCell = this._selectedCell.nextElementSibling136 } else if (keyPressed == 'PageDown') {137 let limitBottom = this._tBody.closest('.result-data').getBoundingClientRect().bottom;138 let rowFound, lastRow;139 this._tBody.querySelectorAll('tr').forEach((row)=>{140 if (!rowFound && row.getBoundingClientRect().bottom > limitBottom) {141 rowFound = lastRow;142 }143 lastRow = row;144 });145 if (rowFound) {146 scrollBlock = 'start';147 nextCell = rowFound.querySelectorAll('td')[148 this._getSelectedColIndex(this._selectedCell)149 ];150 }151 } else if (keyPressed == 'PageUp') {152 let limitTop = this._tBody.closest('.result-data').getBoundingClientRect().top;153 let rowFound;154 this._selectedCell.scrollIntoView({block:'end'});155 this._tBody.querySelectorAll('tr').forEach((row)=>{156 if (!rowFound && row.getBoundingClientRect().top > limitTop) {157 rowFound = row;158 }159 });160 if (rowFound) {161 nextCell = rowFound.querySelectorAll('td')[162 this._getSelectedColIndex(this._selectedCell)163 ];164 scrollBlock = nextCell.parentElement.dataset.row === "0" ? 'end' : 'nearest';165 }166 }167 this._changeSelectedCell(nextCell, scrollBlock);168 }169 _getSelectedColIndex(cell) {170 let selectedColIndex = 0;171 cell.closest('tr').querySelectorAll('td').forEach((col, i)=>{172 if (col.classList.contains('dbex-selected-cell')) {173 selectedColIndex = i;174 }175 });176 return selectedColIndex;177 }178 get _columnSizes() {179 //TODO: implement these values in a proper way, as a DI or by another class constant180 return ['dbex-col-undefined', 'dbex-col-number', 'dbex-col-text', 'dbex-col-boolean', 'dbex-col-date'];181 }182 _generateDataRowsEl(selectedCellIndex = 0) {183 let rows = [];184 this.data.forEach((srcData, index) => {185 let row = document.createElement("tr");186 row.dataset.row = index;187 let elData = document.createElement("td");188 elData.classList.add('dbex-col-index', 'tool-panel');189 elData.innerHTML = `<div class="td-inner">${index}</div>`;190 elData.classList.add(this._columnSizes[1]);191 row.appendChild(elData);192 Object.values(srcData).forEach((dataItem, dataIdx) => {193 let elData = document.createElement("td");194 if (dataItem === null) {195 elData.classList.add('dbex-value-null');196 } else {197 elData.innerHTML = dataItem;198 }199 let colType = this.columns[dataIdx] ? this.columns[dataIdx].type : 0;200 elData.classList.add(this._columnSizes[colType]);201 row.appendChild(elData);202 });203 rows.push(row.outerHTML);204 });205 if (this.data.length === 0) {206 let row = document.createElement("tr");207 row.innerHTML = `<td colspan="${this.columns.length}">No data</td>`;208 rows.push(row.outerHTML);209 }210 return rows;211 }212 _getColumnsElement() {213 let colRow = document.createElement("tr");214 let width = this._columnSizes[1];215 let elColumn = document.createElement("th");216 elColumn.classList.add(width, 'dbex-col-index', 'dbex-dead-corner', 'tool-panel');217 elColumn.innerHTML = `218 <div class="th-inner">219 <div class="th-text"></div>220 <div class="resizer"></div>221 </div>222 `;223 colRow.appendChild(elColumn);224 this.columns.forEach((srcColumn) => {225 let width = this._columnSizes[srcColumn.type];226 let elColumn = document.createElement("th");227 elColumn.classList.add(width, 'tool-panel');228 elColumn.innerHTML = `229 <div class="th-inner">230 <div class="th-text">${srcColumn.name}</div>231 <div class="resizer"></div>232 </div>233 `;234 colRow.appendChild(elColumn);235 });236 let cols = document.createElement("thead");237 cols.appendChild(colRow);238 return cols;239 }240 destroy() {241 this.dispose();242 }243 dispose() {244 this.clusterize.destroy();245 }...
ui.js
Source:ui.js
1var SudokuUI = function(element) {2 this._root = element;3 this._root.innerHTML = "";4 var ui = this;5 document.addEventListener("keypress", function(evt) { ui.handleKeypress(evt); });6 document.addEventListener("keydown", function(evt) { ui.handleKeydown(evt); });7 this._newbutton = document.createElement("button");8 this._newbutton.innerHTML = "New";9 this._newbutton.id = "new";10 this._newbutton.addEventListener("click", function(evt) { ui.newPuzzle(); });11 this._restartbutton = document.createElement("button");12 this._restartbutton.innerHTML = "Restart";13 this._restartbutton.id = "restart";14 this._restartbutton.addEventListener("click", function(evt) { ui.restartPuzzle(); });15 this._restorebutton = document.createElement("button");16 this._restorebutton.innerHTML = "Restore";17 this._restorebutton.id = "restore";18 this._restorebutton.addEventListener("click", function(evt) { ui.restorePuzzle(); });19 this._restorebutton.style.visibility = "hidden";20 this._levelselect = document.createElement("select");21 this._levelselect.id = "level";22 var levelnames = ["level1", "level2", "level3", "level4", "level5"];23 var leveldescriptions = ["Easy", "Normal", "Hard", "Very hard", "Insane"];24 for(var i=0; i<levelnames.length; ++i) {25 var option = document.createElement("option");26 option.value = levelnames[i];27 option.innerHTML = leveldescriptions[i];28 this._levelselect.appendChild(option);29 }30 this._levelselect.addEventListener("click", function(evt) {evt.stopPropagation(); });31 this._winbox = document.createElement("div");32 this._winbox.classList.add("winbox");33 this._winbox.id = "winbox";34 this._root.appendChild(this._winbox);35 var wintext = document.createElement("span");36 wintext.classList.add("wintext");37 wintext.innerHTML = "Solved!";38 this._winbox.appendChild(wintext);39 this._winbox.style.visibility = "hidden";40 this._root.appendChild(this._newbutton);41 this._root.appendChild(this._restartbutton);42 this._root.appendChild(this._restorebutton);43 this._root.appendChild(this._levelselect);44 document.addEventListener("click", function(evt) { ui.handleClick(); });45 this.loadPuzzle();46};47SudokuUI.prototype.handleClick = function() {48 this.deselectCell();49 this._winbox.style.visibility = "hidden";50}51SudokuUI.prototype.deselectCell = function() {52 if(!this._cellSelected) {53 return;54 }55 this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "";56 this._cellSelected = false;57}58SudokuUI.prototype.handleSet = function(i,j,value) {59 this._cells[i][j].innerHTML = (value == -1 ? " " : value);60 this._restorebutton.style.visibility = "hidden";61 this._restartbutton.style.visibility = "visible";62}63SudokuUI.prototype.handleClear = function() {64 for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {65 for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {66 this.handleSet(i,j,this._sudoku.get(i,j));67 }68 }69 this._restorebutton.style.visibility = "visible";70 this._restartbutton.style.visibility = "hidden";71}72SudokuUI.prototype.handleRestore = function() {73 for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {74 for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {75 this.handleSet(i,j,this._sudoku.get(i,j));76 }77 }78 this._restorebutton.style.visibility = "hidden";79 this._restartbutton.style.visibility = "visible";80}81SudokuUI.prototype.loadPuzzle = function() {82 var s = Sudoku.load();83 if(!s) {84 this.newPuzzle();85 }86 else {87 this._sudoku = s;88 this.initPuzzle();89 }90}91SudokuUI.prototype.newPuzzle = function(level=null) {92 if(!level) {93 var level = this._levelselect.value;94 }95 this._sudoku = Sudoku.create(level);96 this.initPuzzle();97}98SudokuUI.prototype.handleWin = function() {99 this._winbox.style.visibility = "visible";100}101SudokuUI.prototype.initPuzzle = function() {102 var ui = this;103 this._sudoku.registerCallback("set", function(i,j,value) { ui.handleSet(i,j,value); });104 this._sudoku.registerCallback("clear", function(i,j,value) { ui.handleClear(); });105 this._sudoku.registerCallback("restore", function(i,j,value) { ui.handleRestore(); });106 this._sudoku.registerCallback("win", function() { ui.handleWin(); });107 this._cellSelected = false;108 this._selectedCell = { i : 0, j : 0 };109 // remove old grid110 if(this._table) {111 this._root.removeChild(this._table);112 }113 // create new grid114 var ui = this;115 var m = this._sudoku.m;116 var n = this._sudoku.n;117 this._cells = [];118 this._table = document.createElement("table");119 this._table.id = "grid";120 for(let i=0; i<m*n; ++i) {121 this._cells.push([]);122 var row = document.createElement("tr");123 this._table.appendChild(row);124 for(let j=0; j<m*n; ++j) {125 var cell = document.createElement("td");126 this._cells[i].push(cell);127 row.appendChild(cell);128 cell.addEventListener("click", function(evt) { ui.handleCellClick(evt, i,j); });129 if(i%m == 0) {130 cell.classList.add("thicktop");131 }132 if(j%n == 0) {133 cell.classList.add("thickleft");134 }135 if(this._sudoku.given(i,j)) {136 cell.classList.add("given");137 }138 }139 }140 this._root.appendChild(this._table);141 for(var i=0; i<this._sudoku.m*this._sudoku.n; ++i) {142 for(var j=0; j<this._sudoku.m*this._sudoku.n; ++j) {143 this.handleSet(i,j,this._sudoku.get(i,j));144 }145 }146 this._restorebutton.style.visibility = (this._sudoku);147 this._restartbutton.style.visibility = (this._sudoku.givens + this._sudoku.blanks == m*m*n*n ? "hidden" : "visible");148};149SudokuUI.prototype.restartPuzzle = function() {150 this._sudoku.clear();151};152SudokuUI.prototype.restorePuzzle = function() {153 this._sudoku.restore();154};155SudokuUI.prototype.handleCellClick = function(evt, i, j) {156 if(this._cellSelected) {157 this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "";158 }159 this._cellSelected = true;160 this._selectedCell.i = i;161 this._selectedCell.j = j;162 this._cells[this._selectedCell.i][this._selectedCell.j].dataset.active = "active";163 evt.stopPropagation(); // don't propagate to a click on the document164};165SudokuUI.prototype.handleKeypress = function(evt) {166 if(!this._cellSelected) {167 return;168 }169 var i = this._selectedCell.i;170 var j = this._selectedCell.j;171 if(this._sudoku.given(i,j)) {172 return;173 }174 var key = evt.key;175 var number = Number(key);176 if(number && number <= this._sudoku.m * this._sudoku.n) {177 this._sudoku.set(i,j,number);178 } else if (key == " " || key == "0") {179 this._sudoku.set(i,j,-1);180 }181};182SudokuUI.prototype.handleKeydown = function(evt) {183 if(this._cellSelected) {184 var i = this._selectedCell.i;185 var j = this._selectedCell.j;186 this._cells[i][j].dataset.active = "";187 var m = this._sudoku.m;188 var n = this._sudoku.n;189 switch(evt.keyCode) {190 case 37: //left191 j -= 1;192 break;193 case 38: //up194 i -= 1;195 break;196 case 39: //right197 j += 1;198 break;199 case 40: //down200 i += 1;201 break;202 case 46: //delete203 case 8: //backspace204 this._sudoku.set(i,j,-1);205 break;206 case 27: //escape207 this.deselectCell();208 return;209 default:210 break;211 }212 if(i < 0) i=0;213 if(i >= m*n) i = m*n-1;214 if(j < 0) j=0;215 if(j >= m*n) j = m*n-1;216 this._selectedCell.i = i;217 this._selectedCell.j = j;218 this._cells[i][j].dataset.active = "active";219 }...
Puzzle.js
Source:Puzzle.js
1import Cell from "./Cell.js";2class Puzzle {3 constructor({4 element,5 image: { x, y, width: imgWidth, height: imgHeight },6 grid: { rows, cols },7 }) {8 this._canvas = element;9 this._ctx = this._canvas.getContext("2d");10 this._image = {11 x,12 y,13 width: imgWidth,14 height: imgHeight,15 src: "../assets/img/mountains.jpg",16 };17 this._grid = {18 rows,19 cols,20 elements: [],21 };22 this._cells = [];23 this._selectedCell = null;24 this._hoveredCell = null;25 this.init();26 }27 init() {28 this._canvas.width = window.innerWidth;29 this._canvas.height = window.innerHeight;30 this.addEventListeners();31 const image = new Image();32 image.src = this._image.src;33 image.onload = () => {34 this.set();35 this.updateCanvas(image);36 };37 }38 isEnded() {39 return this._grid.elements.length ? false : true;40 }41 restart() {42 this.set();43 }44 addEventListeners() {45 this._canvas.addEventListener("mousedown", this.onMouseDown.bind(this));46 this._canvas.addEventListener("mouseout", this.onMouseOut.bind(this));47 this._canvas.addEventListener(48 "mousemove",49 this.handleHoverEvent.bind(this),50 );51 this._canvas.addEventListener("dragstart", () => {52 return false;53 });54 }55 handleHoverEvent(event) {56 this._hoveredCell = this.getCell(event.x, event.y);57 if (this._hoveredCell === null || this._hoveredCell.isInserted) {58 document.body.style.cursor = "default";59 return;60 }61 if (document.body.style.cursor === "grabbing") return;62 document.body.style.cursor = "grab";63 }64 onMouseOut() {65 this._canvas.onmousemove = null;66 }67 onMouseDown(event) {68 this._selectedCell = this.getCell(event.x, event.y);69 if (this._selectedCell === null) return;70 if (this._selectedCell.isInserted) return;71 document.body.style.cursor = "grabbing";72 const index = this._cells.indexOf(this._selectedCell);73 if (index !== -1) {74 this._cells.splice(index, 1);75 this._cells.push(this._selectedCell);76 }77 this._selectedCell.offset = {78 x: event.x - this._selectedCell.x,79 y: event.y - this._selectedCell.y,80 };81 //this._selectedCell.start = {82 // x: this._selectedCell.x,83 // y: this._selectedCell.y,84 //};85 this._canvas.onmousemove = this.onMouseMove.bind(this);86 this._canvas.onmouseup = this.onMouseUp.bind(this);87 }88 onMouseMove(event) {89 let x = event.x - this._selectedCell.offset.x;90 let y = event.y - this._selectedCell.offset.y;91 if (x < 0) {92 x = 0;93 }94 if (y < 0) {95 y = 0;96 }97 if (x > window.innerWidth - this._selectedCell.width) {98 x = window.innerWidth - this._selectedCell.width;99 }100 if (y > window.innerHeight - this._selectedCell.height) {101 y = window.innerHeight - this._selectedCell.height;102 }103 this._selectedCell.x = x;104 this._selectedCell.y = y;105 }106 onMouseUp(event) {107 this._canvas.onmousemove = null;108 this._canvas.onmouseup = null;109 this.insertCell(event.x, event.y);110 delete this._selectedCell.offset;111 //delete this._selectedCell.start;112 this._selectedCell = null;113 document.body.style.cursor = "grab";114 }115 getCell(x, y) {116 for (let i = this._cells.length - 1; i >= 0; i--) {117 let cell = this._cells[i];118 if (119 x > cell.x &&120 x < cell.x + cell.width &&121 y > cell.y &&122 y < cell.y + cell.height123 ) {124 return cell;125 }126 }127 return null;128 }129 insertCell(x, y) {130 for (let i = 0; i < this._grid.elements.length; i++) {131 const gridItem = this._grid.elements[i];132 if (133 x >= gridItem.x &&134 x <= gridItem.x + this._selectedCell.width &&135 y >= gridItem.y &&136 y <= gridItem.y + this._selectedCell.height &&137 this._selectedCell.rowIndex === gridItem.rowIndex &&138 this._selectedCell.colIndex === gridItem.colIndex139 ) {140 if (!this.isCellFree(gridItem.x, gridItem.y)) {141 return;142 }143 this._selectedCell.x = gridItem.x;144 this._selectedCell.y = gridItem.y;145 this._selectedCell.isInserted = true;146 const index = this._grid.elements.indexOf(gridItem);147 if (index !== -1) {148 this._grid.elements.splice(index, 1);149 }150 return;151 }152 }153 //this._selectedCell.x = this._selectedCell.start.x;154 //this._selectedCell.y = this._selectedCell.start.y;155 }156 isCellFree(gridX, gridY) {157 for (let i = 0; i < this._cells.length - 1; i++) {158 const cell = this._cells[i];159 if (160 ((gridX < cell.x && cell.x < gridX + cell.width) ||161 (gridX < cell.x + cell.width &&162 cell.x + cell.width < gridX + cell.width)) &&163 ((gridY < cell.y && cell.y < gridY + cell.height) ||164 (gridY < cell.y + cell.height &&165 cell.y + cell.height < gridY + cell.height))166 ) {167 return false;168 }169 }170 return true;171 }172 updateCanvas(image) {173 this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);174 this._ctx.globalAlpha = 0.25;175 this._ctx.drawImage(176 image,177 this._image.x,178 this._image.y,179 this._image.width,180 this._image.height,181 );182 this._ctx.globalAlpha = 1;183 this.draw(image);184 window.requestAnimationFrame(this.updateCanvas.bind(this, image));185 }186 set() {187 this._cells = [];188 this._grid.elements = [];189 for (let rowIndex = 0; rowIndex < this._grid.rows; rowIndex++) {190 for (let colIndex = 0; colIndex < this._grid.cols; colIndex++) {191 const coordinates = {192 x:193 this._image.x +194 (this._image.width * colIndex) / this._grid.cols,195 y:196 this._image.y +197 (this._image.height * rowIndex) / this._grid.rows,198 };199 const gridItem = {200 rowIndex,201 colIndex,202 x: coordinates.x,203 y: coordinates.y,204 };205 const cell = {206 ...gridItem,207 width: this._image.width / this._grid.cols,208 height: this._image.height / this._grid.rows,209 cx: (this._image.width * colIndex) / this._grid.cols,210 cy: (this._image.height * rowIndex) / this._grid.rows,211 };212 this._grid.elements.push(gridItem);213 this._cells.push(new Cell(cell));214 }215 }216 this.scatterCells();217 }218 scatterCells() {219 const positions = [];220 let i = 0;221 while (positions.length < this._cells.length) {222 const position = {223 x:224 Math.random() *225 (window.innerWidth / 2 - this._cells[i].width) *226 0.75 +227 window.innerWidth / 16,228 y:229 Math.random() *230 (window.innerHeight - this._cells[i].height) *231 0.75 +232 window.innerHeight / 8,233 };234 if (235 !positions.some(236 (p) =>237 Math.abs(p.x - position.x) < this._cells[i].width &&238 Math.abs(p.y - position.y) < this._cells[i].height,239 )240 ) {241 this._cells[i].x = position.x;242 this._cells[i].y = position.y;243 positions.push(position);244 i++;245 }246 }247 }248 draw(image) {249 this.drawGrid(image);250 this.drawCells(image);251 }252 drawGrid(image) {253 for (let i = 0; i < this._grid.elements.length; i++) {254 const gridItem = this._grid.elements[i];255 this._ctx.beginPath();256 this._ctx.strokeStyle = "#d2e9ee";257 this._ctx.rect(258 gridItem.x,259 gridItem.y,260 this._cells[0]?.width,261 this._cells[0]?.height,262 );263 this._ctx.stroke();264 }265 }266 drawCells(image) {267 for (let i = 0; i < this._cells.length; i++) {268 const cell = this._cells[i];269 cell.draw(this._ctx, image);270 }271 }272}...
_PaletteMixin.js
Source:_PaletteMixin.js
1//>>built2define("dijit/_PaletteMixin",["dojo/_base/declare","dojo/dom-attr","dojo/dom-class","dojo/dom-construct","dojo/keys","dojo/_base/lang","dojo/on","./_CssStateMixin","./a11yclick","./focus","./typematic"],function(_1,_2,_3,_4,_5,_6,on,_7,_8,_9,_a){3var _b=_1("dijit._PaletteMixin",_7,{defaultTimeout:500,timeoutChangeRate:0.9,value:"",_selectedCell:-1,tabIndex:"0",cellClass:"dijitPaletteCell",dyeClass:null,_dyeFactory:function(_c){4var _d=typeof this.dyeClass=="string"?_6.getObject(this.dyeClass):this.dyeClass;5return new _d(_c);6},_preparePalette:function(_e,_f){7this._cells=[];8var url=this._blankGif;9this.own(on(this.gridNode,_8,_6.hitch(this,"_onCellClick")));10for(var row=0;row<_e.length;row++){11var _10=_4.create("tr",{tabIndex:"-1",role:"row"},this.gridNode);12for(var col=0;col<_e[row].length;col++){13var _11=_e[row][col];14if(_11){15var _12=this._dyeFactory(_11,row,col,_f[_11]);16var _13=_4.create("td",{"class":this.cellClass,tabIndex:"-1",title:_f[_11],role:"gridcell"},_10);17_12.fillCell(_13,url);18_13.idx=this._cells.length;19this._cells.push({node:_13,dye:_12});20}21}22}23this._xDim=_e[0].length;24this._yDim=_e.length;25var _14={UP_ARROW:-this._xDim,DOWN_ARROW:this._xDim,RIGHT_ARROW:this.isLeftToRight()?1:-1,LEFT_ARROW:this.isLeftToRight()?-1:1};26for(var key in _14){27this.own(_a.addKeyListener(this.domNode,{keyCode:_5[key],ctrlKey:false,altKey:false,shiftKey:false},this,function(){28var _15=_14[key];29return function(_16){30this._navigateByKey(_15,_16);31};32}(),this.timeoutChangeRate,this.defaultTimeout));33}34},postCreate:function(){35this.inherited(arguments);36this._setCurrent(this._cells[0].node);37},focus:function(){38_9.focus(this._currentFocus);39},_onCellClick:function(evt){40var _17=evt.target;41while(_17.tagName!="TD"){42if(!_17.parentNode||_17==this.gridNode){43return;44}45_17=_17.parentNode;46}47var _18=this._getDye(_17).getValue();48this._setCurrent(_17);49_9.focus(_17);50this._setValueAttr(_18,true);51evt.stopPropagation();52evt.preventDefault();53},_setCurrent:function(_19){54if("_currentFocus" in this){55_2.set(this._currentFocus,"tabIndex","-1");56}57this._currentFocus=_19;58if(_19){59_2.set(_19,"tabIndex",this.tabIndex);60}61},_setValueAttr:function(_1a,_1b){62if(this._selectedCell>=0){63_3.remove(this._cells[this._selectedCell].node,this.cellClass+"Selected");64}65this._selectedCell=-1;66if(_1a){67for(var i=0;i<this._cells.length;i++){68if(_1a==this._cells[i].dye.getValue()){69this._selectedCell=i;70_3.add(this._cells[i].node,this.cellClass+"Selected");71break;72}73}74}75this._set("value",this._selectedCell>=0?_1a:null);76if(_1b||_1b===undefined){77this.onChange(_1a);78}79},onChange:function(){80},_navigateByKey:function(_1c,_1d){81if(_1d==-1){82return;83}84var _1e=this._currentFocus.idx+_1c;85if(_1e<this._cells.length&&_1e>-1){86var _1f=this._cells[_1e].node;87this._setCurrent(_1f);88this.defer(_6.hitch(_9,"focus",_1f));89}90},_getDye:function(_20){91return this._cells[_20.idx].dye;92}});93return _b;...
Using AI Code Generation
1Cypress.Commands.add('selectedCell', { prevSubject: 'element' }, (subject, row, column) => {2 return cy.wrap(subject)3 .find('table')4 .find('tbody')5 .find('tr')6 .eq(row)7 .find('td')8 .eq(column)9 .find('input')10 .first()11})12describe('My Test', () => {13 it('should test', () => {14 cy.get('table').selectedCell(0, 0).click()15 })16})17Cypress.Commands.add('selectedCell', { prevSubject: 'element' }, (subject, row, column) => {18 return cy.wrap(subject)19 .find('table')20 .find('tbody')21 .find('tr')22 .eq(row)23 .find('td')24 .eq(column)25 .find('input')26 .first()27})28describe('My Test', () => {29 it('should test', () => {30 cy.get('table').selectedCell(0, 0).should('have.value', 'test')31 })32})
Using AI Code Generation
1describe('test', () => {2 it('test', () => {3 cy.get('.gLFyf').type('hello world')4 cy.get('.gLFyf')._selectedCell(2)5 cy.get('.gLFyf').type('hello world')6 })7})8declare namespace Cypress {9 interface Chainable<Subject> {10 _selectedCell(index: number): Chainable<Subject>;11 }12}13Cypress.Commands.add('_selectedCell', (index) => {14 const input = cy.get('.gLFyf').get('input').get('input')15 input[0].setSelectionRange(index, index)16})
Using AI Code Generation
1Cypress.Commands.add('_selectedCell', (row, col) => {2 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);3});4Cypress.Commands.add('_selectedCell', (row, col) => {5 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);6});7Cypress.Commands.add('_selectedCell', (row, col) => {8 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);9});10Cypress.Commands.add('_selectedCell', (row, col) => {11 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);12});13Cypress.Commands.add('_selectedCell', (row, col) => {14 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);15});16Cypress.Commands.add('_selectedCell', (row, col) => {17 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);18});19Cypress.Commands.add('_selectedCell', (row, col) => {20 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);21});22Cypress.Commands.add('_selectedCell', (row, col) => {23 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);24});25Cypress.Commands.add('_selectedCell', (row, col) => {26 return cy.get(`tr:nth-child(${row})>td:nth-child(${col})`);27});28Cypress.Commands.add('_selectedCell', (row, col) => {29 return cy.get(`tr:nth-child(${row})>td:nth-child(${
Using AI Code Generation
1it('test', () => {2 cy.get('input')._selectedCell(1, 1)3})4Cypress.Commands.add('_selectedCell', { prevSubject: 'element' }, (subject, row, col) => {5 cy.wrap(subject).its('0').then((el) => {6 cy.wrap(cell).click()7 })8})9declare namespace Cypress {10 interface Chainable {11 _selectedCell(row: number, col: number): Chainable<Element>12 }13}
Using AI Code Generation
1Cypress.Commands.add('_selectedCell', () => {2 .get('body')3 .then(($body) => {4 let selectedCell = $body.find('.selected-cell');5 return selectedCell;6 });7});8Cypress.Commands.add('_selectedCell', () => {9 .get('body')10 .then(($body) => {11 let selectedCell = $body.find('.selected-cell');12 return selectedCell;13 });14});15Cypress.Commands.add('_selectedCell', () => {16 .get('body')17 .then(($body) => {18 let selectedCell = $body.find('.selected-cell');19 return selectedCell;20 });21});22Cypress.Commands.add('_selectedCell', () => {23 .get('body')24 .then(($body) => {25 let selectedCell = $body.find('.selected-cell');26 return selectedCell;27 });28});29Cypress.Commands.add('_selectedCell', () => {30 .get('body')31 .then(($body) => {32 let selectedCell = $body.find('.selected-cell');33 return selectedCell;34 });35});36Cypress.Commands.add('_selectedCell', () => {37 .get('body')38 .then(($body) => {39 let selectedCell = $body.find('.selected-cell');40 return selectedCell;41 });42});43Cypress.Commands.add('_selectedCell', () => {44 .get('body')45 .then(($body) => {46 let selectedCell = $body.find('.selected-cell');47 return selectedCell;
Using AI Code Generation
1Cypress.Commands.add('_selectedCell', (selector, cell) => {2 cy.get(selector).eq(cell).click()3})4it('should select a cell', () => {5 cy._selectedCell('.cell', 1)6})
Using AI Code Generation
1cy.get('table')._selectedCell('td', 3, 3).should('have.class', 'selected');2Cypress.Commands.add('_selectedCell', (table, row, col) => {3 return cy.get(table).find('tr').eq(row).find('td').eq(col);4});5Cypress.Commands.add('click', { prevSubject: 'element' }, (subject) => {6 if (subject.is(':visible')) {7 cy.wrap(subject).click();8 } else {9 cy.wrap(subject).trigger('click');10 }11});
Using AI Code Generation
1cy.get('.table')._selectedCell(0, 0).should('contain', 'A1');2Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {3 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);4});5Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {6 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);7});8Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {9 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);10});11Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {12 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);13});14Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {15 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);16});17Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {18 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);19});20Cypress.Commands.add('_selectedCell', (row, col, options = {}) => {21 return cy.get(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`, options);22});
Using AI Code Generation
1describe('Test Grid', () => {2 it('should show selected cell', () => {3 cy.visit('/grid');4 cy.get('.grid')._selectedCell().should('contain', '1');5 });6});
Cypress Tutorial
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.
Chapters:
- What is Cypress? -
- Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
- Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
- Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
- Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
- Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
- Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
- Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
- How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.
Certification
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.
YouTube
Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.
Run Cypress automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
