Convert Figma logo to code with AI

antiwork logoshortest

QA via natural language AI tests

4,675
262
4,675
1

Top Related Projects

Master programming by recreating your favorite technologies from scratch.

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

352,643

😎 Awesome lists about all kinds of interesting topics

:books: Freely available programming books

A complete computer science study plan to become a software engineer.

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Quick Overview

The antiwork/shortest repository is a minimalist JavaScript library designed to find the shortest path between two points in a 2D grid. It implements the A* search algorithm and provides a simple API for pathfinding tasks. The library is lightweight and easy to integrate into web-based projects or Node.js applications.

Pros

  • Lightweight and efficient implementation of A* algorithm
  • Easy to use API with minimal setup required
  • Suitable for both browser and Node.js environments
  • Well-documented with clear examples

Cons

  • Limited to 2D grid-based pathfinding
  • May not be suitable for complex pathfinding scenarios
  • Lacks advanced features found in more comprehensive pathfinding libraries
  • No built-in visualization tools for debugging or demonstration

Code Examples

Finding the shortest path between two points:

import { findShortestPath } from 'shortest';

const grid = [
  [0, 0, 0, 1, 0],
  [1, 1, 0, 1, 0],
  [0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0],
  [0, 0, 0, 1, 0]
];

const start = { x: 0, y: 0 };
const end = { x: 4, y: 4 };

const path = findShortestPath(grid, start, end);
console.log(path);

Customizing the heuristic function:

import { findShortestPath, manhattanDistance } from 'shortest';

const customHeuristic = (a, b) => 2 * manhattanDistance(a, b);

const path = findShortestPath(grid, start, end, { heuristic: customHeuristic });

Handling unreachable destinations:

import { findShortestPath } from 'shortest';

const unreachableEnd = { x: 3, y: 1 };
const result = findShortestPath(grid, start, unreachableEnd);

if (result === null) {
  console.log('No path found to the destination');
}

Getting Started

To use the shortest library in your project, follow these steps:

  1. Install the package:

    npm install shortest
    
  2. Import and use the library in your code:

    import { findShortestPath } from 'shortest';
    
    const grid = [
      [0, 0, 0],
      [0, 1, 0],
      [0, 0, 0]
    ];
    
    const start = { x: 0, y: 0 };
    const end = { x: 2, y: 2 };
    
    const path = findShortestPath(grid, start, end);
    console.log(path);
    
  3. Customize options as needed:

    const options = {
      diagonal: true,
      heuristic: (a, b) => Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y))
    };
    
    const path = findShortestPath(grid, start, end, options);
    

Competitor Comparisons

Master programming by recreating your favorite technologies from scratch.

Pros of build-your-own-x

  • Comprehensive collection of tutorials for building various software projects
  • Covers a wide range of technologies and programming languages
  • Actively maintained with regular updates and contributions

Cons of build-your-own-x

  • May be overwhelming for beginners due to the large number of projects
  • Some tutorials might be outdated or lack detailed explanations
  • Requires significant time investment to complete multiple projects

Code comparison

build-your-own-x:

def build_web_server():
    # Implementation of a basic web server
    pass

def build_database():
    # Implementation of a simple database
    pass

shortest:

def shortest_path(graph, start, end):
    # Implementation of shortest path algorithm
    pass

Summary

build-your-own-x is a extensive repository offering tutorials for building various software projects across different technologies. It provides a wealth of learning opportunities but may be overwhelming for beginners. shortest, on the other hand, focuses specifically on implementing the shortest path algorithm, making it more targeted and potentially easier to grasp for those interested in graph algorithms.

build-your-own-x is better suited for developers looking to expand their skills across multiple domains, while shortest is ideal for those focusing on graph theory and algorithm implementation. The choice between the two depends on the learner's goals and experience level.

Interactive roadmaps, guides and other educational content to help developers grow in their careers.

Pros of developer-roadmap

  • Comprehensive guide for developers at various skill levels
  • Regularly updated with new technologies and industry trends
  • Visual roadmaps make it easy to understand learning paths

Cons of developer-roadmap

  • Can be overwhelming for beginners due to the vast amount of information
  • Might not cover specific niche technologies or frameworks
  • Some roadmaps may become outdated quickly in rapidly evolving fields

Code comparison

Not applicable, as both repositories don't contain significant code samples. developer-roadmap primarily consists of markdown files and images, while shortest is a minimal repository with no substantial code.

Additional notes

shortest is a minimalist repository with a single README file, aimed at demonstrating the concept of the shortest possible GitHub repository. It serves a different purpose than developer-roadmap and doesn't provide educational content or resources for developers.

developer-roadmap, on the other hand, is a comprehensive resource for developers looking to plan their learning journey or explore different areas of software development. It offers visual guides, explanations, and resources for various technologies and career paths in the tech industry.

352,643

😎 Awesome lists about all kinds of interesting topics

Pros of awesome

  • Extensive collection of curated lists covering a wide range of topics
  • Large community with frequent updates and contributions
  • Well-organized structure with clear categories and subcategories

Cons of awesome

  • Can be overwhelming due to the sheer volume of information
  • May include outdated or less relevant resources in some lists
  • Requires more time to navigate and find specific information

Code comparison

Not applicable, as both repositories primarily consist of markdown files and don't contain significant code samples.

Additional notes

shortest:

  • Focused specifically on work-related topics and discussions
  • Smaller, more niche community
  • Less structured organization of content

awesome:

  • Broader scope covering various tech-related topics
  • Highly popular with over 200,000 stars on GitHub
  • Follows a standardized format for list creation and maintenance

Both repositories serve different purposes and cater to distinct audiences. shortest is more targeted towards work-related discussions and resources, while awesome provides a comprehensive collection of curated lists across numerous tech topics.

:books: Freely available programming books

Pros of free-programming-books

  • Extensive collection of free programming resources across many languages and topics
  • Well-organized with clear categorization and language-specific sections
  • Actively maintained with frequent updates and contributions from the community

Cons of free-programming-books

  • Large repository size may be overwhelming for beginners
  • Some links may become outdated or broken over time
  • Lacks a specific focus or curated learning path

Code comparison

Not applicable, as both repositories primarily contain lists of resources rather than code.

Additional notes

shortest:

  • Focused specifically on anti-work resources and discussions
  • Smaller, more niche community
  • May appeal to those interested in labor rights and alternative work philosophies

free-programming-books:

  • Broader appeal to developers and learners across various programming disciplines
  • Higher star count and more contributors, indicating wider adoption
  • Serves as a comprehensive reference for free programming education materials

Both repositories serve different purposes and target distinct audiences. shortest caters to those interested in anti-work ideology, while free-programming-books is a valuable resource for programmers and aspiring developers seeking free learning materials.

A complete computer science study plan to become a software engineer.

Pros of coding-interview-university

  • Comprehensive curriculum covering a wide range of computer science topics
  • Well-structured learning path with clear progression
  • Extensive collection of resources, including videos, articles, and practice problems

Cons of coding-interview-university

  • Can be overwhelming due to the sheer amount of content
  • May take a significant time investment to complete
  • Focuses primarily on theoretical concepts rather than practical coding skills

Code comparison

While shortest doesn't contain actual code, coding-interview-university includes code examples for various algorithms and data structures. Here's a sample comparison:

shortest:

No code available

coding-interview-university:

def binary_search(list, item):
    low = 0
    high = len(list) - 1
    while low <= high:
        mid = (low + high) // 2
        guess = list[mid]
        if guess == item:
            return mid
        if guess > item:
            high = mid - 1
        else:
            low = mid + 1
    return None

Summary

coding-interview-university is a comprehensive resource for computer science and interview preparation, offering a structured learning path and extensive materials. However, it may be time-consuming and overwhelming for some users. shortest, on the other hand, appears to be a minimal repository with limited content, making it difficult to draw a meaningful comparison in terms of code or learning resources.

Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.

Pros of system-design-primer

  • Comprehensive resource for learning system design concepts
  • Well-organized content with diagrams and explanations
  • Large community support and regular updates

Cons of system-design-primer

  • May be overwhelming for beginners due to extensive content
  • Requires significant time investment to fully utilize
  • Lacks hands-on coding exercises for practical implementation

Code comparison

system-design-primer:

class Cache:
    def __init__(self):
        self.size = 0
        self.max_size = 10
        self.lookup = {}
        self.linked_list = LinkedList()

shortest:

# No relevant code available for comparison

Additional notes

system-design-primer is a comprehensive resource for learning system design concepts, covering various topics and providing detailed explanations. It's well-maintained and has a large community following.

shortest, on the other hand, appears to be a minimal repository with limited information available. It's unclear what specific purpose or content this repository contains based on the provided information.

The significant difference in scope and content between these two repositories makes a direct comparison challenging. system-design-primer is clearly aimed at providing educational resources for system design, while the purpose and content of shortest remain unclear without further information.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Shortest logo

Shortest

AI-powered natural language end-to-end testing framework.

Features

  • Natural language E2E testing framework
  • AI-powered test execution using Anthropic Claude API
  • Built on Playwright
  • GitHub integration with 2FA support
  • Email validation with Mailosaur

Using Shortest in your project

If helpful, here's a short video!

Installation

Use the shortest init command to streamline the setup process in a new or existing project.

The shortest init command will:

npx @antiwork/shortest init

This will:

  • Automatically install the @antiwork/shortest package as a dev dependency if it is not already installed
  • Create a default shortest.config.ts file with boilerplate configuration
  • Generate a .env.local file (unless present) with placeholders for required environment variables, such as ANTHROPIC_API_KEY
  • Add .env.local and .shortest/ to .gitignore

Quick start

  1. Determine your test entry and add your Anthropic API key in config file: shortest.config.ts
import type { ShortestConfig } from "@antiwork/shortest";

export default {
  headless: false,
  baseUrl: "http://localhost:3000",
  browser: {
    contextOptions: {
      ignoreHTTPSErrors: true
    },
  },
  testPattern: "**/*.test.ts",
  ai: {
    provider: "anthropic",
  },
} satisfies ShortestConfig;

The Anthropic API key defaults to SHORTEST_ANTHROPIC_API_KEY / ANTHROPIC_API_KEY environment variables. Can be overwritten via ai.config.apiKey.

Optionally, you can configure browser behavior using the browser.contextOptions property in your configuration file. This allows you to pass custom Playwright browser context options.

  1. Create test files using the pattern specified in the config: app/login.test.ts
import { shortest } from "@antiwork/shortest";

shortest("Login to the app using email and password", {
  username: process.env.GITHUB_USERNAME,
  password: process.env.GITHUB_PASSWORD,
});

Using callback functions

You can also use callback functions to add additional assertions and other logic. AI will execute the callback function after the test execution in browser is completed.

import { shortest } from "@antiwork/shortest";
import { db } from "@/lib/db/drizzle";
import { users } from "@/lib/db/schema";
import { eq } from "drizzle-orm";

shortest("Login to the app using username and password", {
  username: process.env.USERNAME,
  password: process.env.PASSWORD,
}).after(async ({ page }) => {
  // Get current user's clerk ID from the page
  const clerkId = await page.evaluate(() => {
    return window.localStorage.getItem("clerk-user");
  });

  if (!clerkId) {
    throw new Error("User not found in database");
  }

  // Query the database
  const [user] = await db
    .select()
    .from(users)
    .where(eq(users.clerkId, clerkId))
    .limit(1);

  expect(user).toBeDefined();
});

Lifecycle hooks

You can use lifecycle hooks to run code before and after the test.

import { shortest } from "@antiwork/shortest";

shortest.beforeAll(async ({ page }) => {
  await clerkSetup({
    frontendApiUrl:
      process.env.PLAYWRIGHT_TEST_BASE_URL ?? "http://localhost:3000",
  });
});

shortest.beforeEach(async ({ page }) => {
  await clerk.signIn({
    page,
    signInParams: {
      strategy: "email_code",
      identifier: "iffy+clerk_test@example.com",
    },
  });
});

shortest.afterEach(async ({ page }) => {
  await page.close();
});

shortest.afterAll(async ({ page }) => {
  await clerk.signOut({ page });
});

Chaining tests

Shortest supports flexible test chaining patterns:

// Sequential test chain
shortest([
  "user can login with email and password",
  "user can modify their account-level refund policy",
]);

// Reusable test flows
const loginAsLawyer = "login as lawyer with valid credentials";
const loginAsContractor = "login as contractor with valid credentials";
const allAppActions = ["send invoice to company", "view invoices"];

// Combine flows with spread operator
shortest([loginAsLawyer, ...allAppActions]);
shortest([loginAsContractor, ...allAppActions]);

API testing

Test API endpoints using natural language

const req = new APIRequest({
  baseURL: API_BASE_URI,
});

shortest(
  "Ensure the response contains only active users",
  req.fetch({
    url: "/users",
    method: "GET",
    params: new URLSearchParams({
      active: true,
    }),
  }),
);

Or simply:

shortest(`
  Test the API GET endpoint ${API_BASE_URI}/users with query parameter { "active": true }
  Expect the response to contain only active users
`);

Running tests

pnpm shortest                   # Run all tests
pnpm shortest login.test.ts     # Run specific tests from a file
pnpm shortest login.test.ts:23  # Run specific test from a file using a line number
pnpm shortest --headless        # Run in headless mode using

You can find example tests in the examples directory.

CI setup

You can run Shortest in your CI/CD pipeline by running tests in headless mode. Make sure to add your Anthropic API key to your CI/CD pipeline secrets.

See example here

GitHub 2FA login setup

Shortest supports login using GitHub 2FA. For GitHub authentication tests:

  1. Go to your repository settings
  2. Navigate to "Password and Authentication"
  3. Click on "Authenticator App"
  4. Select "Use your authenticator app"
  5. Click "Setup key" to obtain the OTP secret
  6. Add the OTP secret to your .env.local file or use the Shortest CLI to add it
  7. Enter the 2FA code displayed in your terminal into Github's Authenticator setup page to complete the process
shortest --github-code --secret=<OTP_SECRET>

Environment setup

Required in .env.local:

ANTHROPIC_API_KEY=your_api_key
GITHUB_TOTP_SECRET=your_secret  # Only for GitHub auth tests

Shortest CLI development

The NPM package is located in packages/shortest/. See CONTRIBUTING guide.

Web app development

This guide will help you set up the Shortest web app for local development.

Prerequisites

  • React >=19.0.0 (if using with Next.js 14+ or Server Actions)
  • Next.js >=14.0.0 (if using Server Components/Actions)

[!WARNING] Using this package with React 18 in Next.js 14+ projects may cause type conflicts with Server Actions and useFormStatus

If you encounter type errors with form actions or React hooks, ensure you're using React 19

Getting started

  1. Clone the repository:
git clone https://github.com/antiwork/shortest.git
cd shortest
  1. Install dependencies:
npm install -g pnpm
pnpm install

Environment setup

For Antiwork team members

Pull Vercel env vars:

pnpm i -g vercel
vercel link
vercel env pull

For other contributors

  1. Run pnpm run setup to configure the environment variables.
  2. The setup wizard will ask you for information. Refer to "Services Configuration" section below for more details.

Set up the database

pnpm drizzle-kit generate
pnpm db:migrate
pnpm db:seed # creates stripe products, currently unused

Services configuration

You'll need to set up the following services for local development. If you're not an Antiwork Vercel team member, you'll need to either run the setup wizard pnpm run setup or manually configure each of these services and add the corresponding environment variables to your .env.local file:

Clerk
  1. Go to clerk.com and create a new app.
  2. Name it whatever you like and disable all login methods except GitHub. Clerk App Login
  3. Once created, copy the environment variables to your .env.local file. Clerk Env Variables
  4. In the Clerk dashboard, disable the "Require the same device and browser" setting to ensure tests with Mailosaur work properly.
Vercel Postgres
  1. Go to your dashboard at vercel.com.
  2. Navigate to the Storage tab and click the Create Database button. Vercel Create Database
  3. Choose Postgres from the Browse Storage menu. Neon Postgres
  4. Copy your environment variables from the Quickstart .env.local tab. Vercel Postgres .env.local
Anthropic
  1. Go to your dashboard at anthropic.com and grab your API Key.
    • Note: If you've never done this before, you will need to answer some questions and likely load your account with a balance. Not much is needed to test the app. Anthropic API Key
Stripe
  1. Go to your Developers dashboard at stripe.com.
  2. Turn on Test mode.
  3. Go to the API Keys tab and copy your Secret key. Stripe Secret Key
  4. Go to the terminal of your project and type pnpm run stripe:webhooks. It will prompt you to login with a code then give you your STRIPE_WEBHOOK_SECRET. Stripe Webhook Secret
GitHub OAuth
  1. Create a GitHub OAuth App:

    • Go to your GitHub account settings.
    • Navigate to Developer settings > OAuth Apps > New OAuth App.
    • Fill in the application details:
      • Application name: Choose any name for your app
      • Homepage URL: Set to http://localhost:3000 for local development
      • Authorization callback URL: Use the Clerk-provided callback URL (found in below image) Github OAuth App
  2. Configure Clerk with GitHub OAuth:

    • Go to your Clerk dashboard.
    • Navigate to Configure > SSO Connections > GitHub.
    • Select Use custom credentials
    • Enter your Client ID and Client Secret from the GitHub OAuth app you just created.
    • Add repo to the Scopes Clerk Custom Credentials
Mailosaur
  1. Sign up for an account with Mailosaur.
  2. Create a new Inbox/Server.
  3. Go to API Keys and create a standard key.
  4. Update the environment variables:
    • MAILOSAUR_API_KEY: Your API key
    • MAILOSAUR_SERVER_ID: Your server ID

The email used to test the login flow will have the format shortest@<MAILOSAUR_SERVER_ID>.mailosaur.net, where MAILOSAUR_SERVER_ID is your server ID. Make sure to add the email as a new user under the Clerk app.

Running locally

Run the development server:

pnpm dev

Open http://localhost:3000 in your browser to see the app in action.

NPM DownloadsLast 30 Days