Today I Learned

6 posts by szymonkieloch

Loading React & Redux dev tools in Cypress

Install webpack plugin: npm install --save-dev react-dev-tools-iframe-webpack-plugin

Update webpack config to enable the react dev tools iframe:

const ReactDevToolsIFramePlugin = require('react-dev-tools-iframe-webpack-plugin');

plugins: [
  // other plugins,
  new ReactDevToolsIFramePlugin(),
],

Update cypress plugins to load React & Redux dev tools for chrome. Add the paths to these extensions in a comma-separated string:

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--load-extension=/home/work/.config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0,/home/work/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.2.1_0');
      return args;
    }
    return null;
  });
};

Here’s a post where you can find out where the extensions are.

Delete all local branches except the current one

From time to time it is necessary to delete all local branches. Assuming there are branches:

git branch --verbose

  a             2eb734f6 Update image tag
  b             2eb734f6 Update image tag
  first-branch  2eb734f6 Update image tag
  second-branch 2eb734f6 Update image tag
* staging       2eb734f6 Update image tag

This command will delete all branches except the current one:

git branch | grep -v `git symbolic-ref -q --short HEAD` | xargs git branch -D
Deleted branch a (was 2eb734f6).
Deleted branch b (was 2eb734f6).
Deleted branch first-branch (was 2eb734f6).
Deleted branch second-branch (was 2eb734f6).

An alias is handy:

alias gdal="git branch | grep -v `git symbolic-ref -q --short HEAD` | xargs git branch -D"

Waiting for content to be expanded in Cypress tests

When testing in Cypress, sometimes there are cases that content within accordion needs to be verified. The challenge is that sometimes, Cypress displays an error that an element is not yet visible, but it is on the page. A simple solution could be to wait for the element to be visible:

cy.contains('Text within the accordion')
  .should('be.visible');

One downside of this approach is that if there are more elements in the accordion, the last one should be check for visibility. Otherwise, Cypress will not wait for expanding the whole accordion and will proceed further with tests, e.g. trying to click an element that is not visible and hidden within the accordion.

An alternative approach to resolve the issue with the expanded accordions is to check its height and wait till it reaches a certain height:

cy.getByTestId('the-accordion')
  .invoke('height')
  .should('be.gt', 700);