npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-attribute-checker

v1.0.0

Published

Small internal utility created to check for the existance of ID attributes on certain elements in Angular project

Downloads

4

Readme

HMTL Attribute Checker

Internal utility too created to check attributes exist on certain element. Useful if you require every element having a unique ID for E2E testing.

Example usage (from within project root): $ html-attribute-checker --config=/Test/attribute.config.js

Options

The HTML attribute checker comes with its own limited set of options to configure. Look at the attribute.config.js see the different options.

Hierarchy of config:

  1. Command line flags e.g --config=config.js
  2. Looks for attribute.config.js at the root of the project
  3. Internal default config

| Option | Description | Values | |--------------------|-------------------------------------------------------------------------------------------------------------------------|--------------------------------| | log | Console feedback log levels for when a file is being processed, passes and fails. Can be multiple if you want feedback on everything. | ['runs', 'success', 'error'] | | failThreshold | Number of allowed missing IDs before the script throws an error | number | | srcDir | Source directory/file to run the script on (accepts globs) | string | string[] | | filesIgnorePattern | Files / folders to ignore (accepts globs) | string | string[] | | requiredAttributes | Attribute to check | 'id' | | checkableElements | HTML elements to check for missing attribute | |

Example config

module.exports = {
    log: ['error'],
    failThreshold: 20,
    srcDir: 'src/app',
    filesIgnorePattern: [
        'src/app/shared',
    ],
    requiredAttributes: 'id',
    checkableElements: {
        'div': true,
    },
};

Using the tool

Default

By default the tool will use the configuration to determine what files to check and how to check them.

$ html-attribute-checker

Custom config

It is possible to provide a config file to use via the command line. This will run the tool the same as the default above.

$ html-attribute-checker --config=myconfig.js

Custom threshold

You can change the fail threshold from the command line if you wish that run to be different to what is configured in the config file.

$ html-attribute-checker --threshold=3

Custom files and/or folders

It's possible to tell the tool which files or folders you want to run on without having to edit the config file. All you need to do is pass the file/folder which you want to test as an argument.

Folder (This will test all HTML inside the folder included nested directories)

$ html-attribute-checker src/app/example

Single file

$ html-attribute-checker src/app/example/feature.html

Multiple files

$ html-attribute-checker src/app/example/feature.html src/app/example/request.html

Mixed files and folders

$ html-attribute-checker src/app/example src/app/test/test.html