Cypress commands are asynchronous. It's a common pattern to use a then callback to get the value of a cypress command

Overview

cypress-thenify

Rationale

Cypress commands are asynchronous. It's a common pattern to use a then callback to get the value of a cypress command.

However, any callback, especially nested one, makes the code less readable.

This plugin allows wrapping a cypress command call statement into a then callback under the hood and keep your code clean and readable.

Usage example

Given code

    let a = cy.get("foo").thenify()
    cy.log(a.text())
    let b = cy.get("bar").thenify()
    cy.log(a.text())
    b.click() // using jQuery click method

will be transpiled into this one:

{ let a = __cypressSyncVar__; cy.log(a.text()); cy.get("bar").then(__cypressSyncVar__ => { let b = __cypressSyncVar__; cy.log(a.text()); b.click(); // using jQuery click method }); });">
  cy.get("foo").then(__cypressSyncVar__ => {
    let a = __cypressSyncVar__;
    cy.log(a.text());
    cy.get("bar").then(__cypressSyncVar__ => {
      let b = __cypressSyncVar__;
      cy.log(a.text());
      b.click(); // using jQuery click method
    });
  });

Limitations

  1. The plugin wraps statements inside the current block of statements only. Use an empty call to cy.thenify() to 'synchronize' the execution context with the cypress event loop:
   let myValue 
   if (myCondition) { // suppose myCondition is true
       myValue = cy.wrap("foo").thenify()
       someOtherCode()
       console.log(myValue) // will print 'foo' as we are inside the same block of code as the `thenify` call
   } else {
       myValue = "bar"
   }
   console.log(myValue) // will print `undefined` as we are out of the initial block of code 
   cy.thenify()
   console.log(myValue) // will print 'foo' as we get in sync with the cypress event loop 
                        // because this and all below statements of the current block will be executed under a `then` callback   
  1. Only a single thenify call per statement is currently supported. So
 let a = cy.wrap(1).thenify() + cy.wrap(2).thenify()

will produce an error.

  1. The plugin searches for the thenify call only by its name, no deep semantic analysis is performed. So it will transpile any of myObj.thenify() calls. Use the plugin options to define your own unique function name if this default name clashes with any of your existing function (see Plugin options section)

Install and configure

npm i cypress-thenify -D

Put this into your plugin/index.js:

{ const options = browserify.defaultOptions options.browserifyOptions.transform[1][1].plugins.push(thenify) on('file:preprocessor', browserify(options)) }">
const browserify = require('@cypress/browserify-preprocessor')
const thenify = require("cypress-thenify")

module.exports = (on) => {
  const options = browserify.defaultOptions
  options.browserifyOptions.transform[1][1].plugins.push(thenify)
  on('file:preprocessor', browserify(options))
}

Plugin options

You can define a custom thenify function name by passing options to the plugin:

    options.browserifyOptions.transform[1][1].plugins.push([thenify, { thenify_function_name: 'cyEval' }])

Project status notice

This project is in alpha stage. Some bugs are highly likely to be found.

You might also like...

All terminal commands in one place (you can Contribute to it by putting latest commands and adding Readme)

Terminal-Commands All basic terminal commands in one place Show some ❤ by some repositories You can contribute to this readme If you to contribute wit

Dec 15, 2022

In this project I'll use Asynchronous Javascript to call an API and set the leaderboard of the best players.

Leaderboard Project In this project I'll use Asynchronous Javascript to call an API and set the leaderboard of the best players. The main goals of thi

Oct 17, 2022

A Discord.JS Command Handler to handle commands eaiser

TABLE OF CONTENTS Installation Setup Changing Default Prefix Creating a Command Usage of minArgs and maxArgs Syntax Errors Global Syntax Errors Per Co

Jun 8, 2022

A command line application to simplify the git workflow on committing, pushing and others commands.

Git-Suite A command line application to simplify the git workflow on committing, pushing and others commands. Prerequisites Install Node Package Manag

Aug 10, 2022

A good looking help command made with discord.js with select menus. Works with prefix and slash commands too!

A good looking help command made with discord.js with select menus. Works with prefix and slash commands too!

fancy-help-command A good looking help command made with discord.js with select menus. Works with prefix and slash commands too! Dependencies: Select

Dec 12, 2022

Get into docker, its time now hhh

get_into_docker This repo is a personal reference and a guide in case of need that holds the process on my activities. This repo is a kind of knowledg

Nov 1, 2022

Implementação do Observer Pattern em TypeScript para o Código Fonte TV

Observer - Design Pattern Exemplos de implementação do Design Pattern Observer, descrito no livro Design Patterns: Elements of Reusable Object-Oriente

Nov 30, 2022

Ethereum smart contract gas cost waste pattern detection and patching tool

Ethereum smart contract gas cost waste pattern detection and patching tool

Ethereum smart contract gas cost waste pattern detection and patching tool

Mar 23, 2022

Rename image after pasting, support name pattern and auto renaming.

Rename image after pasting, support name pattern and auto renaming.

Obsidian paste image rename This plugin is inspired by Zettlr, Zettlr shows a prompt that allows the user to rename the image, this is a great help if

Jan 2, 2023
Comments
  • Update README.md to include webpack/babel install

    Update README.md to include webpack/babel install

    Webpack/babel dependencies are not correctly picked up when adding the package, at least with yarn. For someone who does not have both packages installed per the official documentation, they will enter a dependency rabbithole trying to get things working.

    opened by aijorgenson 1
  • parseFloat around cy.get command

    parseFloat around cy.get command

    Total mode:

    const subtotal = parseFloat(cy.get('#subtotal').invoke('text'))
    

    is showing an error

    Screen Shot 2022-10-04 at 20 22 30

    // no error
    const subtotal = cy.get('#subtotal').invoke('text').then(parseFloat)
    
    opened by bahmutov 1
Owner
Mikhail Bolotov
Mikhail Bolotov
Run a command, watch the filesystem, stop the process on file change and then run the command again...

hubmon Run a command, watch the filesystem, stop the process on file change and then run the command again... Install You can install this command lin

Hubert SABLONNIÈRE 7 Jul 30, 2022
CloudCrafter CLI is a command-line interface tool that provides templates for common cloud resources to help you get started quickly.

CloudCrafter CLI CloudCrafter CLI is a command-line interface tool that provides templates for common cloud resources to help you get started quickly.

Missio 7 May 5, 2023
A common front-end/Service Worker-based Key/Value database based on CacheStorage

Cache-DB A common front-end/Service Worker-based Key/Value database based on CacheStorage > const db = new CacheDB('ChenYFanDB') < undefined > await d

CrazyCreativeDream 4 Sep 30, 2022
Tenzi is a dice game. The player needs to roll dice until they are all the same. Clicking on a dice, freezes it at its current value between rolls. Best scores are saved to local storage.

Roll until all dice are the same Try me! Technologies Used Description Tenzi is a dice game used to demonstrate the use of React Hooks (useState, useE

Michael Kolesidis 7 Nov 23, 2022
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
coc-pyright-tools is a coc-extension that adds its own functionality to coc-pyright for coc.nvim. Currently the "Inlay Hints", "CodeLens" and "Test Framework commands" feature is available.

coc-pyright-tools !!WARNING!! Inlay hints feature of coc-pyright-tools, have been ported to coc-pyright itself. https://github.com/fannheyward/coc-pyr

yaegassy 5 Aug 23, 2022
365 Days of study and preparation to get an internship and then a job at Google.

365DaysToGoogle 365 Days of study and preparation to get an internship and then a job at Google. Study Program Introduction Let's make a quick introdu

null 8 Jan 19, 2022