How do you matrix-test a website on mobile browsers and screen sizes?

Matrix testing is really interesting, how do you make an action to run an e2e test with something like CodeceptJS on a web URL with many browsers and screen sizes?

You could add matrix to your job , and use {{ matrix.browser }} and {{ matrix.screen }} in your test step. 

Please see my example: 

name: matrix
on: push
jobs:
  test:
    strategy:
      matrix:
        browser: [IE, Chrome, Firefox]
        screen: [1280x720 , 800x480, 1920x1080]
    runs-on: ubuntu-latest
    steps:
    - name: run your test
      run: echo $browser + $size
      env:
        browser: ${{ matrix.browser }}
        size: ${{ matrix.screen }}

When run this job, it will generate 9 jobs with different configuration: 

matrix job.png

For more detail usage, please refer to this official matrix syntax docuement: https://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions#jobsjob_idstrategymatrix 

And there is an action for running Cypress end-to-end tests. https://github.com/cypress-io/github-action Does it match your scenario?

1 Like

Thank you for the detailed reply! Will check out Cypress. It would be cool if there were a nice way to do this. Can we run docker-compose with a database, app, and test containers?

Cypress is extremely cool and it would be perfect if we could keep our existing tests with CodeceptJS syntax

Yes, you could run docker-compose in workflow. Please refer to previous ticket here: 

https://github.community/t5/GitHub-Actions/How-to-use-docker-compose-with-GitHub-Actions/td-p/37824