Jump to content

Some testing tools for Pixi.js apps/games


finlaymacklon
 Share

Recommended Posts

As a part of my PhD research on visual testing for web games, I’ve developed (/begun developing) a couple of tools that might help when (visually) testing your games. 

The first tool allows you to simultaneously sample a copy of the Scene Graph and a screenshot of the game when running automated test scripts. The only browser automation framework currently supported is Playwright. Can add other frameworks if requested. Link: https://github.com/finlaymacklon/pixi-sampler

The other tool is a chrome extension that injects some code into the browser to enable tooltips over objects on the canvas. Right now it just supports hovering over objects with a texture, which I think makes sense. Soon I’d like to make the information shown in the tooltips customizable through some simple config file. Link: https://github.com/finlaymacklon/pixi-tooltips

I would absolutely love if anyone has any feedback, or even tries one of these tools out. Please don’t hesitate to submit an Issue on the GitHub repositories. 

Thanks for reading!

- Finlay

Link to comment
Share on other sites

1 hour ago, b10b said:

I'm interested in Pixi Tooltips.  Please walk me through the install - sorry if I'm missing the obvious.

Hey, I added some detailed instructions to the GitHub repository here at this link. The installation is definitely not obvious. I will try to add this extension to the Chrome Web Store in the next few days so that it is much easier to install. Will post an update here when it is available on Chrome Web Store. Thank you!

Link to comment
Share on other sites

Thanks @finlaymacklon  I couldn't get it to build (npm via webpack on PC) - but also I didn't spend too much time digging in to why.  Also I noted the 'npm install' was missing from instructions.  Any chance you can build it and put it as a downloadable "release" on github?  Adding to Chrome extensions seems easy enough, so this approach would avoid any adopter's needs for git, npm, or building.  Might be a faster cycle than waiting for Chrome Store admission.

Link to comment
Share on other sites

Hey @b10bthanks for the great suggestion! I have now made a release with a zip file of the build. See here: https://github.com/finlaymacklon/pixi-tooltips/releases/tag/v0.0.1

Thank you for the feedback, I'll update the README with instructions to install via the GitHub release. Also thanks for pointing out I missed the `npm install`!

Edited by finlaymacklon
Link to comment
Share on other sites

Thanks @finlaymacklon the updated install and build make it very easy.  Works as expected.  I can see this growing to be a useful tool.  As it is right now it's limited for my use because no identifier for Spritesheet / Atlas resources.  For your PhD if you want specific feedback, commercial usage scenarios, or other assistance (from a fellow Canadian) feel free to email me via https://b10b.com.  I am co-investigator on some research projects at our local uni involving web game based learning so that might be useful reference.

Link to comment
Share on other sites

Thanks for all the feedback @b10b! I really appreciate it, and will look to continue adding to the tool over time - e.g., to make it useful for spritesheet/atlas resources. I will be in contact about specific feedback etc. through your website to follow up. 

Edited by finlaymacklon
Link to comment
Share on other sites

  • 5 months later...

I decided to remove the tools listed above from GitHub to focus on the development of an automated visual testing framework (which is the focus of my thesis topic). To follow the development of the framework or try it out in its current state (does not yet include bug reporting and does not work for all PixiJS apps), you can check it out here: https://github.com/asgaardlab/canvas-visual-bugs-testbed

Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...