Category: Uncategorized

Anyone who has ever started programming knows the situation. You write a component that works at first sight, but then has a lot of bugs when you use it. In the development phase this is quite natural, but if the application is handed over to a customer without much testing, so the big bang is not far away.

Now you sit there and have to test several 1000 elements, which affect every changes. Repeating tests several times is time-consuming and nerve-racking.

But fortunately there is the test framwork Cypress, which was developed especially for Web application.

The special thing about Cypress is that everything runs automatically. Manual clicking is a thing of the past.

You can read a detailed feature description at: https://docs.cypress.io/guides/overview/why-cypress.html#Our-mission

Start with Cypress

Install Cypress

First of all, we navigate to our project folder in the terminal and then install all the necessary packages there.

$ cd/your/project/path

npm:

$ npm install cypress --save-dev

yarn:

$ yarn add cypress --dev

Open Cypress

npm:

$ npx cypress open

yarn:

$ yarn run cypress open

Cypress User Interface

The main menu should look something like this:

As you can see, the tool already provides many finished examples. To check if everything works, you can simply click on a sample test and a new window will open where the test will be executed.

The Cypress Test-Runner opens and should look something like this:

The First Steps

In this section I will give you a short summary what you should know for the start.

1. create a test file

• All test files come in the folder: cypress/intergration
• naming convention: fileName_spec.js or fileName.spec.js
• describe(), it(), context() and specify() contain the actual test and you can also use them to structure your test and give it a name.

File structure in an example:

// -- Start: Our Application Code --
function add (a, b) {
  return a + b
}
// -- End: Our Application Code --

// -- Start: Our Cypress Tests --
describe('Unit test our math functions', function() {
  context('math', function() {
    it('can add numbers', function() {
      expect(add(1, 2)).to.eq(3)
    })
})
// -- End: Our Cypress Tests --

2. Write test

As soon as you have created the test file, Cypress automatically updates the test list and your test should be selectable in the menu.

This section shows the basic functions.

Visit the test website: cy.visit()

This function checks the link and returns a true if a 2XX status like 200 is returned. Otherwise a false is returned and the test fails.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
})

• 

• As you can see, the functions in the command log are displayed as uppercase letters. Here in our example VISIT.
• A click on it, the addressed element is visually displayed in function.
• All tests are displayed as a timeline and you can “jump back” the time and see exactly when and where the test failed or invoked.

Query elements

In Cypress we can query and pick an element from our test website . if it exist a true will be retrun

The common functions for this are:

contains(content) – Returns the DOM element containing the corresponding innerText..

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test contain PHMU slogan', function() {
    cy.contains('Unser Herz schlägt digital')
  })
})

get(selector) – Returns the DOM element selected with the selector.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test contain PHMU slogan', function() {
    cy.get('img[class=image]')
    //Sucht ein img element mit der CSS-Klasse image
  })
})

Interacting with Elements

After you have queried the elements in the previous step, it is also possible to interact with the elements. If interaction with an element is not possible, the test will be displayed as failed.

type()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('input[id="firstname"]').type('Tung')
  })
})

click()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('button[id="submit"]').click()
  })
})

select()

describe('My First Test', function() {
  it('Test contact formular', function() {
    cy.visit('https://www.phmu.de/workshops')
  })
  it('Test firstname input', function() {
    cy.get('select[id="title"]').select("Doctor")
  })
})

Assertion

With should() you can check if an element is what you expect it to be. As an example, we want to make sure that the current URL is the expected URL.

describe('My First Test', function() {
  it('Test PHMU Website', function() {
    cy.visit('https://www.phmu.de/')
  })
  it('Test workshop link', function() {
    cy.get(a[href="/workshop"]).click
    cy.url().should('include', '/workshop')
  })
})

In this blog I have only given you the most necessary information for Cypress. Cypress is too big to put everything in one blog.

As I have already mentioned, I highly recommend you to read the documentation. Besides the good documentation it also contains Best Practices to test effectively.

Links

• https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
• https://docs.cypress.io/api/api/table-of-contents.html

Tailwind CSS as a utility-based framework ensures an incredibly efficient workflow when developing modern frontends. To use it in your WordPress Theme you could simply serve it from CDN. But for going beyond Tailwind’s rudimentary functionality you can’t avoid setting it up locally in your Theme. In this article we will set up Tailwind CSS in a WordPress Theme using gulp.js.

WPGulp and Gulp-PostCSS

To integrate Tailwind into your WordPress Theme you should install WPGulp first. WPGulp is a plugin to simplify gulp.js setups in WordPress. Additionally, you will need the gulp plugin of PostCSS to process Tailwind.

npx wpgulp
npm install -D gulp-postcss

Now you have installed a complete gulp setup that generates compact CSS files from SCSS. Inside your wpgulp.config.js you can configure your project paths and other variables. Specify the location of your SCSS files and where your CSS shall be generated. Since your project is now based on SCSS you should adapt your previous stylesheets.

Installing Tailwind CSS

At this point we are ready to integrate Tailwind into our theme:

npm install tailwindcss

Add Tailwind to your primary SCSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

To customize Tailwind individually, you can generate a config file:

npx tailwind init

In the created tailwind.config.js you can configure Tailwind as you like. More at

Integration von Tailwind CSS in gulp

Now we have everything we need to configure Tailwind with gulp. In our gulpfile.babel.js we will add PostCSS and Tailwind to the CSS-related plugins at first:

// CSS related plugins
// ...
const postcss = require( ‘gulp-postcss’ );
const tailwindcss = require( ‘tailwindcss’ );
// ...

Both plugins are imported into our gulp file as constants. Now we want gulp to use them. The gulp tasks styles and stylesRTL generate our finale CSS files and right-to-left stylesheets. Here we will insert PostCSS and Tailwind:

gulp.task( ‘styles’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...
gulp.task( ‘stylesRTL’. () => {
  return gulp
    .src( config.stlyeSRC, { allowEmpty: true })
    // ...
    .pipe( postcss([
      tailwindcss( ‘./path/to/your/tailwind.config.js’ ),
      require( ‘autoprefixer’ )
    ]) )
    // ...
});
// ...

Once done we can test if our setup works by simply adding a Tailwind class i.e. bg-red-500 to any HTML element in one of your PHP files.

Now you can run npm start. If all the styles are generated successfully you can check your site if the new Tailwind styles are displayed correctly. If so, congratulations! You just have set up Tailwind CSS in your WordPress Theme. Now you can customize your Tailwind theme in the tailwind.config.js.

Links:

• WPGulp: https://github.com/ahmadawais/WPGulp
• gulp.js: https://gulpjs.com/
• Tailwind CSS: https://tailwindcss.com/