Git Product home page Git Product logo

actions-image's Introduction

actions-image

Post a image on the pull request. Usefull for screenshots of failed E2E tests. Also supports tagging code files.

Requirements

If you encounter the "Resource not accessible by integration" you need to add the following permissions:

permissions:
    contents: write
    actions: read
    checks: write

Inputs

GITHUB_TOKEN - REQUIRED

The github token to perform api actions, can be set to ${{GITHUB_TOKEN}} or a custom one.

path - REQUIRED

The path to the image files, it supports glob. (Ex: ./my-image/**/*.png)

title - OPTIONAL

The title to display on the annotations (Ex: Failed E2E Tests)

uploadHost - OPTIONAL

Where to upload the pictures to (Default: https://litterbox.catbox.moe/resources/internals/api.php , please do not upload sensitive information, this is public access), uses form POST to upload.

annotationTag - OPTIONAL

The tag that is used to split the base64 image info (Default: [==] Ex: tests/mytest.spec.js[--]80:40.png)

annotationLevel - OPTIONAL

The annotation level | Supported values: notice, warning, failure (Default: notice)


Example usage

- name: Upload failed tests
  if: ${{ failure() }}
  uses: edunad/[email protected]
  with:
      path: './failed_tests/**/*.png'
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      title: 'Failed E2E tests ๐Ÿ™€'
      annotationLevel: 'failure'

How to tag images on code

Save your image name with following format and convert it to base64

filePath[==]line:column

For example :

tests/mycode/basic-test.spec.js[==]80:30

Then on NodeJS save the image as

const fs = require('fs');
const imageName = Buffer.from(`tests/mycode/basic-test.spec.js[==]80:30`).toString('base64');

fs.writeFileSync(`${imageName}.png`, ...etc)

It will then apply the add an annotation like

actions-image's People

Contributors

edunad avatar moufmouf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

actions-image's Issues

Images array was larger than 65535 bytes

Error:

The size of all the files that were uploaded is 1397741 bytes. And the error occurs:

Validation Failed: {"resource":"CheckRun","code":"custom","field":"images","message":"images array was larger than 65535 bytes"}

Expected behavior:

No error. Is there any way to increase the limit in case a lot of screenshots?

Error: Cannot read properties of undefined (reading 'map')

Run edunad/[email protected]
  with:
    path: UnnamedClockProject-3D_top.png
    GITHUB_TOKEN: ***
    title: PCB
    uploadHost: https://litterbox.catbox.moe/
    annotationTag: [--]
    annotationLevel: notice
Error: Failed to upload images
Error: Cannot read properties of undefined (reading 'map')

It might just be something I've misconfigured...
https://github.com/KenwoodFox/UnnamedClockProject/blob/22053a8d6d00088100b44c9347cd59f84a6e46e9/.github/workflows/hardware_workflow.yml#L53-L69

But even if it is, i don't understand what map its talking about, the error should be more descriptive of what I did wrong? Thanks and lmk!

Unable to get screenshots to appear in GH Actions Check

Looks like I am able to get this step to successful pass and create a check with screenshots but the problem is the screenshots appear to be broken:
Screen Shot 2022-07-20 at 1 44 26 PM

When clicking on an Image I get a Cannot proxy the given URL error.

Is this expected? When looking at the output, it appears successful:
Screen Shot 2022-07-20 at 1 44 10 PM

Thanks!

Not sure if it impacts the above but we forked the repo at v1.0.1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.