Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use createFrame method in wpt
Best JavaScript code snippet using wpt
sort.js
Source:sort.js 
...184 let delay = 0;185 const arrWithInitialIndex = arr.map((value, index) => {186 return [value, index];187 });188 valueFrames = createFrame(valueFrames, { type: 'color', id: 0, duration: 150, color: '#FFF', delay });189 valueFrames = createFrame(valueFrames, { type: 'bg', id: 0, duration: 150, backgroundColor: '#FF165D', delay });190 delay += 150;191 for(let x = 1; x < arr.length; x++) {192 let value = arrWithInitialIndex[x];193 //change color of elementValue194 valueFrames = createFrame(valueFrames, { type: 'color', id: x, duration: 150, color: '#FFF', delay });195 valueFrames = createFrame(valueFrames, { type: 'bg', id: x, duration: 150, backgroundColor: '#FF9A00', delay });196 delay += 150;197 let y = x - 1;198 while(y >= 0 && arrWithInitialIndex[y][0] > value[0]) {199 arrWithInitialIndex[y + 1] = arrWithInitialIndex[y];200 //change position of x and y201 boxFrames = createFrame(boxFrames, { type: 'move', id: value[1], duration: 250, newIndex: y, delay });202 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[y][1], duration: 250, newIndex: y + 1, delay });203 delay += 250;204 y--;205 }206 arrWithInitialIndex[y + 1] = value;207 //color to elementValue back to normal208 valueFrames = createFrame(valueFrames, { type: 'color', id: x, duration: 150, color: '#FFF', delay });209 valueFrames = createFrame(valueFrames, { type: 'bg', id: x, duration: 150, backgroundColor: '#FF165D', delay });210 delay += 150;211 }212 //here create a timeline and return it213 addFramesToTimeline(lineFrames, valueFrames, boxFrames);214 return sortTimeline; 215};216export const bubbleSortFrames = arr => {217 //preparing frames array218 createEmptyFrames(arr.length);219 let delay = 0;220 const arrWithInitialIndex = arr.map((value, index) => {221 return [value, index];222 });223 for(let x = 1; x < arr.length; x++) {224 let swap = false;225 let stopIndex = 0;226 for(let y = 0; y < arr.length - x; y++) {227 // change color of the two elements of the next conditional(if)228 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y][1], duration: 150, color: '#FFF', delay });229 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y][1], duration: 150, backgroundColor: '#FF9A00', delay });230 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y + 1][1], duration: 150, color: '#FFF', delay });231 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y + 1][1], duration: 150, backgroundColor: '#FF9A00', delay });232 delay += 150;233 if(arrWithInitialIndex[y][0] > arrWithInitialIndex[y + 1][0]) {234 swap = true;235 const yValue = arrWithInitialIndex[y];236 // if the first element is bigger then the second one, both will change the position237 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[y][1], duration: 150, newIndex: y + 1, delay });238 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[y + 1][1], duration: 150, newIndex: y, delay });239 delay += 150;240 arrWithInitialIndex[y] = arrWithInitialIndex[y + 1];241 arrWithInitialIndex[y + 1] = yValue;242 }243 // small number change the color/bg back to normal244 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y][1], duration: 150, color: '#000', delay });245 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y][1], duration: 150, backgroundColor: '#FFF', delay });246 delay += 150;247 stopIndex = y + 1;248 }249 // this element is in the right position250 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[stopIndex][1], duration: 150, color: '#FFF', delay });251 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[stopIndex][1], duration: 150, backgroundColor: '#FF165D', delay });252 delay += 150;253 if(!swap) {254 for(let z = stopIndex - 1; z > 0; z--) {255 // this element is in the right position256 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[z][1], duration: 150, color: '#FFF', delay });257 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[z][1], duration: 150, backgroundColor: '#FF165D', delay });258 delay += 150;259 }260 break;261 }262 }263 // this element is in the right position264 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[0][1], duration: 150, color: '#FFF', delay });265 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[0][1], duration: 150, backgroundColor: '#FF165D', delay });266 delay += 150;267 //here create a timeline and return it268 addFramesToTimeline(lineFrames, valueFrames, boxFrames);269 return sortTimeline;270};271export const selectionSortFrames = arr => {272 //preparing frames array273 createEmptyFrames(arr.length);274 let delay = 0;275 const arrWithInitialIndex = arr.map((value, index) => {276 return [value, index];277 });278 for(let x = 0; x < arr.length - 1; x++) {279 let minIndex = x;280 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[minIndex][1], duration: 150, color: '#FFF', delay });281 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[minIndex][1], duration: 150, backgroundColor: '#3EC1D3', delay });282 delay += 150;283 for(let y = x + 1; y < arr.length; y++) {284 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y][1], duration: 150, color: '#FFF', delay });285 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y][1], duration: 150, backgroundColor: '#FF9A00', delay });286 delay += 150;287 if(arrWithInitialIndex[y][0] < arrWithInitialIndex[minIndex][0]) {288 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[minIndex][1], duration: 50, color: '#000', delay });289 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[minIndex][1], duration: 50, backgroundColor: '#FFF', delay });290 delay += 50;291 minIndex = y;292 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y][1], duration: 50, color: '#FFF', delay });293 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y][1], duration: 50, backgroundColor: '#3EC1D3', delay });294 delay += 50;295 } else if(y !== minIndex) {296 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[y][1], duration: 100, color: '#000', delay });297 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[y][1], duration: 100, backgroundColor: '#FFF', delay });298 delay += 100;299 }300 }301 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[x][1], duration: 150, newIndex: minIndex, delay });302 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[minIndex][1], duration: 150, newIndex: x, delay });303 delay += 150;304 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[minIndex][1], duration: 50, color: '#FFF', delay });305 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[minIndex][1], duration: 50, backgroundColor: '#FF165D', delay });306 delay += 50;307 const xValue = arrWithInitialIndex[x];308 arrWithInitialIndex[x] = arrWithInitialIndex[minIndex];309 arrWithInitialIndex[minIndex] = xValue;310 }311 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[arr.length - 1][1], duration: 50, color: '#FFF', delay });312 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[arr.length - 1][1], duration: 50, backgroundColor: '#FF165D', delay });313 delay += 50;314 //here create a timeline and return it315 addFramesToTimeline(lineFrames, valueFrames, boxFrames);316 return sortTimeline;317};318export const heapSortFrames = arr => {319 //preparing frames array320 createEmptyFrames(arr.length);321 let delay = 0;322 const arrWithInitialIndex = arr.map((value, index) => {323 return [value, index];324 });325 const heapify = (index, size) => {326 const left = index * 2 + 1;327 const right = index * 2 + 2;328 let max = index;329 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[index][1], duration: 100, color: '#FFF', delay });330 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[index][1], duration: 100, backgroundColor: '#FF9A00', delay });331 delay += 100;332 if(right < size && arrWithInitialIndex[right][0] > arrWithInitialIndex[max][0]) {333 max = right;334 }335 if(left < size && arrWithInitialIndex[left][0] > arrWithInitialIndex[max][0]) {336 max = left;337 }338 if(max !== index) {339 const swap = arrWithInitialIndex[max];340 // 341 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[max][1], duration: 150, newIndex: index, delay });342 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[index][1], duration: 150, newIndex: max, delay });343 delay += 150;344 arrWithInitialIndex[max] = arrWithInitialIndex[index];345 arrWithInitialIndex[index] = swap;346 heapify(max, size);347 } else {348 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[index][1], duration: 100, color: '#000', delay });349 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[index][1], duration: 100, backgroundColor: '#FFF', delay });350 delay += 100;351 }352 };353 //create a max heap with the array354 for(let x = Math.floor(arr.length / 2); x >= 0; x--) {355 heapify(x, arr.length);356 }357 // extract the sorted arr358 for(let x = arr.length - 1; x > 0; x--) {359 const swap = arrWithInitialIndex[0]360 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[0][1], duration: 200, color: '#FFF', delay });361 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[0][1], duration: 200, backgroundColor: '#3EC1D3', delay });362 delay += 200;363 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[0][1], duration: 150, newIndex: x, delay });364 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[x][1], duration: 150, newIndex: 0, delay });365 delay += 150;366 arrWithInitialIndex[0] = arrWithInitialIndex[x];367 arrWithInitialIndex[x] = swap;368 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[x][1], duration: 50, color: '#FFF', delay });369 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[x][1], duration: 50, backgroundColor: '#FF165D', delay });370 delay += 50;371 heapify(0, x);372 }373 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[0][1], duration: 50, color: '#FFF', delay });374 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[0][1], duration: 50, backgroundColor: '#FF165D', delay });375 delay += 50;376 //here create a timeline and return it377 addFramesToTimeline(lineFrames, valueFrames, boxFrames);378 return sortTimeline;379};380export const mergeSortFrames = arr => {381 //preparing frames array382 createEmptyFrames(arr.length);383 let delay = 0;384 const arrWithInitialIndex = arr.map((value, index) => {385 return [value, index];386 });387 //merge two sorted arrays(subarrays of arrWithInitialIndex)388 const merge = (left, middle, right) => {389 let i = 0;390 let j = 0391 let k = left;392 let lastMerge = left === 0 && right === arr.length - 1? true: false;393 let leftArray = [];394 for(let x = left; x <= middle; x++) {395 leftArray.push(arrWithInitialIndex[x]);396 }397 let rightArray = [];398 for(let y = middle + 1; y <= right; y++) {399 rightArray.push(arrWithInitialIndex[y]);400 }401 while(i < leftArray.length && j < rightArray.length) {402 if(leftArray[i][0] < rightArray[j][0]) {403 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });404 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF9A00', delay });405 delay += 200;406 if(arrWithInitialIndex[k][0] !== leftArray[i][0] && arrWithInitialIndex[k][1] !== leftArray[i][1]) {407 lineFrames = createFrame(lineFrames, { type: 'height', id: k, duration: 300, height: leftArray[i][0], delay });408 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 300, color: lastMerge? '#FFF': '#000', delay });409 valueFrames = createFrame(valueFrames, { type: 'innerHTML', id: k, duration: 300, innerHTML: leftArray[i][0], delay });410 if(lastMerge) {411 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 300, backgroundColor: '#FF165D', delay });412 }413 delay += 300;414 } else if(lastMerge) {415 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });416 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF165D', delay });417 delay += 200;418 }419 arrWithInitialIndex[k] = leftArray[i];420 i++;421 } else {422 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });423 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF9A00', delay });424 delay += 200;425 if(arrWithInitialIndex[k][0] !== rightArray[j][0] && arrWithInitialIndex[k][1] !== rightArray[j][1]) {426 lineFrames = createFrame(lineFrames, { type: 'height', id: k, duration: 300, height: rightArray[j][0], delay });427 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 300, color: lastMerge? '#FFF': '#000', delay });428 valueFrames = createFrame(valueFrames, { type: 'innerHTML', id: k, duration: 300, innerHTML: rightArray[j][0], delay });429 if(lastMerge) {430 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 300, backgroundColor: '#FF165D', delay });431 }432 delay += 300;433 } else if(lastMerge) {434 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });435 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF165D', delay });436 delay += 200;437 }438 arrWithInitialIndex[k] = rightArray[j];439 j++;440 }441 if(!lastMerge) {442 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#000', delay });443 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FFF', delay });444 delay += 200;445 }446 k++;447 }448 449 while(i < leftArray.length) {450 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });451 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF9A00', delay });452 delay += 200;453 if(arrWithInitialIndex[k][0] !== leftArray[i][0] && arrWithInitialIndex[k][1] !== leftArray[i][1]) {454 lineFrames = createFrame(lineFrames, { type: 'height', id: k, duration: 300, height: leftArray[i][0], delay });455 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 300, color: lastMerge? '#FFF': '#000', delay });456 valueFrames = createFrame(valueFrames, { type: 'innerHTML', id: k, duration: 300, innerHTML: leftArray[i][0], delay });457 if(lastMerge) {458 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 300, backgroundColor: '#FF165D', delay });459 }460 delay += 300;461 } else if(lastMerge) {462 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });463 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF9A00', delay });464 delay += 200;465 }466 arrWithInitialIndex[k] = leftArray[i];467 if(!lastMerge) {468 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#000', delay });469 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FFF', delay });470 delay += 200;471 }472 k++;473 i++;474 }475 while(j < rightArray.length) {476 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });477 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF9A00', delay });478 delay += 200;479 if(arrWithInitialIndex[k][0] !== rightArray[j][0] && arrWithInitialIndex[k][1] !== rightArray[j][1]) {480 lineFrames = createFrame(lineFrames, { type: 'height', id: k, duration: 300, height: rightArray[j][0], delay });481 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 300, color: lastMerge? '#FFF': '#000', delay });482 valueFrames = createFrame(valueFrames, { type: 'innerHTML', id: k, duration: 300, innerHTML: rightArray[j][0], delay });483 if(lastMerge) {484 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 300, backgroundColor: '#FF165D', delay });485 }486 delay += 300;487 } else if(lastMerge) {488 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#FFF', delay });489 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FF165D', delay });490 delay += 200;491 }492 arrWithInitialIndex[k] = rightArray[j];493 if(!lastMerge) {494 valueFrames = createFrame(valueFrames, { type: 'color', id: k, duration: 200, color: '#000', delay });495 valueFrames = createFrame(valueFrames, { type: 'bg', id: k, duration: 200, backgroundColor: '#FFF', delay });496 delay += 200;497 }498 k++;499 j++;500 }501 };502 //sort a array503 const sort = (left, right) => {504 if(left < right) {505 const middle = Math.floor((left + right) / 2);506 sort(left, middle);507 sort(middle + 1, right);508 merge(left, middle, right);509 }510 };511 sort(0, arr.length - 1);512 //here create a timeline and return it513 addFramesToTimeline(lineFrames, valueFrames, boxFrames);514 return sortTimeline;515};516export const quickSortFrames = arr => {517 //preparing frames array518 createEmptyFrames(arr.length);519 let delay = 0;520 const arrWithInitialIndex = arr.map((value, index) => {521 return [value, index];522 });523 const swap = (indexOne, indexTwo) => {524 if(indexOne !== indexTwo) {525 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[indexOne][1], duration: 200, newIndex: indexTwo, delay });526 boxFrames = createFrame(boxFrames, { type: 'move', id: arrWithInitialIndex[indexTwo][1], duration: 200, newIndex: indexOne, delay });527 delay += 200;528 }529 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[indexTwo][1], duration: 200, color: '#000', delay });530 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[indexTwo][1], duration: 200, backgroundColor: '#FFF', delay });531 delay += 200;532 const swapElement = arrWithInitialIndex[indexOne];533 arrWithInitialIndex[indexOne] = arrWithInitialIndex[indexTwo];534 arrWithInitialIndex[indexTwo] = swapElement;535 };536 const partition = (l,r) => {537 const pivot = arrWithInitialIndex[r];538 valueFrames = createFrame(valueFrames, { type: 'color', id: pivot[1], duration: 200, color: '#FFF', delay });539 valueFrames = createFrame(valueFrames, { type: 'bg', id: pivot[1], duration: 200, backgroundColor: '#FF9A00', delay });540 delay += 200;541 let i = l - 1;542 for(let j = l; j < r; j++) {543 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[j][1], duration: 200, color: '#FFF', delay });544 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[j][1], duration: 200, backgroundColor: '#3EC1D3', delay });545 delay += 200;546 if(arrWithInitialIndex[j][0] <= pivot[0]) {547 i++;548 swap(i, j);549 } else {550 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[j][1], duration: 200, color: '#000', delay });551 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[j][1], duration: 200, backgroundColor: '#FFF', delay });552 delay += 200;553 } 554 }555 swap(r, i + 1);556 return i + 1;557 };558 const quickSort = (l, r) => {559 if(l < r) {560 const pivot = partition(l, r);561 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[pivot][1], duration: 200, color: '#FFF', delay });562 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[pivot][1], duration: 200, backgroundColor: '#FF165D', delay });563 delay += 200;564 quickSort(l, pivot - 1);565 quickSort(pivot + 1, r);566 } else if(l === r) {567 valueFrames = createFrame(valueFrames, { type: 'color', id: arrWithInitialIndex[r][1], duration: 200, color: '#FFF', delay });568 valueFrames = createFrame(valueFrames, { type: 'bg', id: arrWithInitialIndex[r][1], duration: 200, backgroundColor: '#FF165D', delay });569 delay += 200;570 }571 };572 quickSort(0, arr.length - 1);573 //here create a timeline and return it574 addFramesToTimeline(lineFrames, valueFrames, boxFrames);575 return sortTimeline;...
code.ts
Source:code.ts
...48 figma.viewport.scrollAndZoomIntoView(nodes);49 }50 if (msg.type === 'create') {51 const nodes: SceneNode[] = [];52 var rootframe = figma.createFrame();53 rootframe.rescale(10.8);54 rootframe.name = "Poster"55 // var autolayoutFrame = figma.createFrame();56 // autolayoutFrame.rescale(10.8);57 // autolayoutFrame.name = "autolayout"58 // autolayoutFrame.layoutMode = "VERTICAL"59 // autolayoutFrame.primaryAxisAlignItems="SPACE_BETWEEN"60 // figma.currentPage.appendChild(rootframe);61 nodes.push(rootframe)62 const logo1 = figma.createRectangle();63 logo1.x = 30;64 logo1.y = 30;65 logo1.name = "College Logo"66 logo1.resize(240, 65);67 const logo2 = figma.createRectangle();68 logo2.x = 930;69 logo2.y = 30;70 logo2.name = "Chapter Logo"71 logo2.resize(120, 85);72 const detailsFooter = figma.createRectangle();73 detailsFooter.x = 0;74 detailsFooter.y = 921;75 detailsFooter.name = "Details Footer"76 detailsFooter.fills = [{ type: 'SOLID', color: msg.color }]77 detailsFooter.resize(1080, 96);78 const handleFooter = figma.createRectangle();79 handleFooter.x = 0;80 handleFooter.y = 1017;81 handleFooter.name = "Handle Footer"82 handleFooter.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }]83 handleFooter.resize(1080, 64);84 rootframe.appendChild(logo1)85 rootframe.appendChild(logo2)86 rootframe.appendChild(detailsFooter)87 rootframe.appendChild(handleFooter)88 const officeHeader = figma.createText();89 const chaptername = figma.createText();90 const technitude = figma.createText();91 const title = figma.createText();92 const speaker = figma.createText();93 const date = figma.createText();94 const time = figma.createText();95 const platform = figma.createText();96 const coord = figma.createText();97 const moreinfo = figma.createText();98 const gmail = figma.createText();99 const instagram = figma.createText();100 const facebook = figma.createText();101 const linkedin = figma.createText();102 // createText, x, y, fontsize, text 103 fontLoader(officeHeader, 40, 'Office of Studentsâ Welfare');104 fontLoader(chaptername, 60, 'ISA-VIT');105 fontLoader(technitude, 45, 'TECHNITUDE ON');106 fontLoader(title, 48, `Introduction to PCB Design and 107 Electronic Design Automation`);108 fontLoader(speaker, 44, 'By: Speaker Name');109 fontLoader(date, 30, '10th October 2021');110 fontLoader(time, 30, '10:00 AM');111 fontLoader(platform, 30, 'Google Meet');112 fontLoader(coord, 32, 'Student Coordinator Details: Adithya Samal +91 9940726436');113 fontLoader(moreinfo, 32, 'For more information contact: events.sw@vit.ac.in');114 fontLoader(gmail, 24, 'isa@vit.ac.in', 121);115 fontLoader(instagram, 24, 'isa_vit_', 402);116 fontLoader(facebook, 24, 'isavitchapter', 619);117 fontLoader(linkedin, 24, 'ISA - VIT', 907);118 rootframe.appendChild(gmail)119 rootframe.appendChild(instagram)120 rootframe.appendChild(facebook)121 rootframe.appendChild(linkedin)122 var officeHeaderFrame = figma.createFrame();123 var chapternameFrame = figma.createFrame();124 var technitudeFrame = figma.createFrame();125 var titleFrame = figma.createFrame();126 var speakerFrame = figma.createFrame();127 var dateFrame = figma.createFrame();128 var timeFrame = figma.createFrame();129 var platformFrame = figma.createFrame();130 var coodFrame = figma.createFrame();131 var moreInfoFrame = figma.createFrame();132 makeFrame(officeHeaderFrame, officeHeader, 136);133 makeFrame(chapternameFrame, chaptername, 204);134 makeFrame(technitudeFrame, technitude, 303);135 makeFrame(titleFrame, title, 408);136 makeFrame(speakerFrame, speaker, 583);137 makeFrame(dateFrame, date, 665);138 makeFrame(timeFrame, time, 725);139 makeFrame(platformFrame, platform, 785);140 makeFrame(coodFrame, coord, 925, true, msg.color);141 makeFrame(moreInfoFrame, moreinfo, 973, true, msg.color);142 rootframe.appendChild(officeHeaderFrame)143 rootframe.appendChild(chapternameFrame)144 rootframe.appendChild(technitudeFrame)145 rootframe.appendChild(titleFrame)...
buttonFrame-test.js
Source:buttonFrame-test.js
...20};21describe('buttonFrame', () => {22 describe('renders', () => {23 it('renders anchor in container', () => {24 expect(createFrame().children.length).toBe(1);25 expect(createFrame().children[0].tagName).toBe('IFRAME');26 });27 it('renders frame with correct default structure', () => {28 const anchor = createFrame();29 expect(anchor.innerHTML).toMatchSnapshot();30 });31 it('renders frame with optional color', () => {32 const frame = createFrame('de', 'white').children[0];33 expect(frame.getAttribute('src')).toContain('?color=white');34 });35 it('renders frame with overwritten locale', () => {36 const frame = createFrame('en').children[0];37 expect(frame.getAttribute('src')).toContain('/en/');38 });39 it('renders frame with overwritten button pathname', () => {40 const origin = 'http://localhost:8081';41 const pathname = `${origin}/button.html`;42 const frame = createFrame('de', undefined, pathname).children[0];43 expect(frame.getAttribute('src')).toContain(pathname);44 });45 });46 describe('postMessage', () => {47 it('calls clickHandler callback', done => {48 spyOn(spies, 'clickHandler').and.callFake(done);49 createFrame(undefined, undefined, 'http://localhost:8081/button.html');50 window.postMessage(51 JSON.stringify({ type: '@jobcloud/click', testOrigin: 'http://localhost:8081', senderId: 'sender001' }),52 '*'53 );54 });55 it('shows user warning when origin does not match', done => {56 spyOn(console, 'warn').and.callFake(() => {57 expect(console.warn.calls.count()).toEqual(1);58 expect(console.warn.calls.argsFor(0)[0]).toContain('JobCloudSDK: Received click message from invalid origin!');59 done();60 });61 createFrame(undefined, undefined, 'http://localhost:8081/button.html');62 window.postMessage(JSON.stringify({ type: '@jobcloud/click', testOrigin: 'http://www.hostile-host.ch' }), '*');63 });64 });...
Using AI Code Generation
1var wpt = require('webpagetest');2var test = wpt('www.webpagetest.org');3 console.log(data);4});5var wpt = require('webpagetest');6var test = wpt('www.webpagetest.org');7 console.log(data);8});9var wpt = require('webpagetest');10var test = wpt('www.webpagetest.org');11test.getLocations(function(err, data) {12 console.log(data);13});14var wpt = require('webpagetest');15var test = wpt('www.webpagetest.org');16test.getTesters(function(err, data) {17 console.log(data);18});19var wpt = require('webpagetest');20var test = wpt('www.webpagetest.org');21 console.log(data);22});23var wpt = require('webpagetest');24var test = wpt('www.webpagetest.org');25 console.log(data);26});27var wpt = require('webpagetest');28var test = wpt('www.webpagetest.org');29 console.log(data);30});31var wpt = require('webpagetest');32var test = wpt('www.webpagetest.org');33 console.log(data);34});
Using AI Code Generation
1var wpt = require('wpt');2var instance = new wpt('API_KEY');3var options = {4};5instance.createFrame(options, function(err, data) {6 console.log(data);7});8{ statusCode: 200,9 statusText: 'Ok' }10var wpt = require('wpt');11var instance = new wpt('API_KEY');12instance.getLocations(function(err, data) {13 console.log(data);14});15{ statusCode: 200,16 [ { location: 'Dulles:Chrome', Label: 'Chrome on Windows 7' },17 { location: 'Dulles:Firefox', Label: 'Firefox on Windows 7' },18 { location: 'Dulles:IE10', Label: 'IE 10 on Windows 7' },19 { location: 'Dulles:IE11', Label: 'IE 11 on Windows 7' },20 { location: 'Dulles:Edge', Label: 'Edge on Windows 10' },21 { location: 'Dulles:Safari', Label: 'Safari on OSX' },22 { location: 'Dulles:Opera', Label: 'Opera on Windows 7' },23 { location: 'Dulles:IE9', Label: 'IE 9 on Windows 7' },24 { location: 'Dulles:IE8', Label: 'IE 8 on Windows 7' },25 { location: 'Dulles:IE7', Label: 'IE 7 on Windows 7' },26 { location: 'Dulles:IE6', Label: 'IE 6 on Windows 7' },27 { location: 'Dulles:Chrome.Android', Label: 'Chrome on Android 4.4' },28 { location: 'Dulles
Using AI Code Generation
1var wpt = require('webpagetest');2var api = wpt('www.webpagetest.org');3 if (err) {4 console.log("error: " + err);5 } else {6 console.log("data: " + data);7 }8});9var wpt = require('webpagetest');10var api = wpt('www.webpagetest.org');11 if (err) {12 console.log("error: " + err);13 } else {14 console.log("data: " + data);15 }16});17var wpt = require('webpagetest');18var api = wpt('www.webpagetest.org');19 if (err) {20 console.log("error: " + err);21 } else {22 console.log("data: " + data);23 }24});25var wpt = require('webpagetest');26var api = wpt('www.webpagetest.org');27 if (err) {28 console.log("error: " + err);29 } else {30 console.log("data: " + data);31 }32});33var wpt = require('webpagetest');34var api = wpt('www.webpagetest.org');35 if (err) {36 console.log("error: " + err);37 } else {38 console.log("data: " + data);39 }40});41var wpt = require('webpagetest');
Using AI Code Generation
1var wptoolkit = require('wptoolkit');2var wp = new wptoolkit();3 if (err) {4 console.log(err);5 } else {6 console.log(body);7 }8});9var wptoolkit = require('wptoolkit');10var wp = new wptoolkit();11 if (err) {12 console.log(err);13 } else {14 console.log(body);15 }16});17var wptoolkit = require('wptoolkit');18var wp = new wptoolkit();19 if (err) {20 console.log(err);21 } else {22 console.log(body);23 }24});25var wptoolkit = require('wptoolkit');26var wp = new wptoolkit();27 if (err) {28 console.log(err);29 } else {30 console.log(body);31 }32});33var wptoolkit = require('wptoolkit');34var wp = new wptoolkit();35 if (err) {36 console.log(err);37 } else {38 console.log(body);39 }40});41var wptoolkit = require('wptoolkit');42var wp = new wptoolkit();43 if (err) {44 console.log(err);45 } else {46 console.log(body);47 }48});49var wptoolkit = require('wpt
Using AI Code Generation
1 if(err){2 console.log(err);3 } else {4 console.log(data);5 }6});7wpt.createVideo(testId, callback);8wpt.createVideo('140421_4E_4B2', function(err, data) {9 if(err){10 console.log(err);11 } else {12 console.log(data);13 }14});15wpt.getLocations(callback);16wpt.getLocations(function(err, data) {17 if(err){18 console.log(err);19 } else {20 console.log(data);21 }22});
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run wpt 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?
