なぜE2Eテストでidを使うべきではないのか ｜Autify（オーティファイ）ブログ
この記事は2019年に執筆されたものです。2024年にリライトした E2Eテストにおける要素選択のベストプラクティス をぜひお読みください。 こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか？以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね！ さて、どのフレームワークを使うにせよ、E2Eテストを書く上で共通で意識しないといけない重要なファクターがいくつか存在します。 その一つが ロケータ です。操作や検証の対象となる要素を指定するためのキーのことです。 ロケータにはCSSセレクタやXPathが利用でき、idやclass、name といった属性を利
E2Eテストにおける要素選択のベストプラクティス ｜Autify（オーティファイ）ブログ
こんにちは。Autifyの品質エバンジェリストの末村です。 もう5年前にもなりますが、なぜE2Eテストでidを使うべきではないのかという記事を書きました。この記事はありがたいことに長い間閲覧されており、弊社ブログの人気コンテンツの一つとなっています。 一方で、5年という歳月はソフトウェア開発のトレンドを変化させるには十分すぎるほどに長いです。テストツールの面では Playwright が新たな選択肢として加わった他、 testing-library によるアクセシビリティ属性を用いた要素探索が新たなベストプラクティスとして登場しています。 この記事では、E2Eテストにおける要素探索の考え方の変遷をおさらいしつつ、ベストプラクティスについて説明します。 要素選択の考え方まずは、要素選択の考え方についておさらいしておきましょう。要素選択とは、読んで字の如く、Webページ内の特定の要素を探すこと
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Auth.js | Authentication for the Web
// auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" export const { auth, handlers } = NextAuth({ providers: [GitHub] }) // middleware.ts export { auth as middleware } from "@/auth" // app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth" export const { GET, POST } = handlers // src/auth.ts import { SvelteKitAuth } from "@auth/sveltekit" impor
Lucia
Lucia Lucia is now a learning resource on implementing auth from scratch. See the announcement for details and migration path. Lucia is an open source project to provide resources on implementing authentication with JavaScript and TypeScript. The main section is on implementing sessions with your database, library, and framework of choice. Using the API you just created, you can continue learning
TypeScript-first schema validation with static type inference
TypeScript-first schema validation with static type inference
shadcn/uiを使って簡単なWebページを作ってみた
はじめに こんにちは、D2Cのフロントエンドエンジニアをやっている廣瀬です。 私が担当しているプロジェクトでは、Vite・React・MUIを主に使用しています。 最近、フロントエンド系の技術を調査してみたところ、shadcn/uiというものを見つけました。 今回、このshadcn/uiをViteで試してみましたので、その内容を記事にしたいと思います。 今回の記事では簡単なWebページを作ってみたいと思います。 shadcn/uiとは？ Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントの集まりです。 ここで注意なのが、shadcn/uiはMUIやChakraUIのようなUIライブラリではなく、npmパッケージとしては提供されていません。ですので、依存関係としてインストールすることはできません。 環境の準備 実際に、以下のような手順でsha
Free and Open source PDF generation library! | pdfme
"content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZ4AAAKFCAMAAADLW3/4AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADDUExURfLx8N7b2eLg3+7k2ero5+bl4/Do3e3r6vDw7+/u7PHr4ezh1c3LysjGxune0cLBw/b08vPu5tnW1dPQz769v+bZy9jNwtDEuuHa0ratp+LTxLe3uvby6sO4sObg2Orl3t3Uy6utsbazss68rayinXxiVaKYk5WMiLWZg5d5ZYhvYN/MuqWBacaxobKOc4qAemxXTbyml/bm06WJd9rDrsSli6OkqIFQRdS0mGlKOldCOJhSRY9oVfTdxEYvJCkYD8iadvAoFyAAACAASU
Deno
Deno is the open-source JavaScript runtime for the modern web. Built on web standards with zero-config TypeScript, unmatched security, and a complete built-in toolchain.
Hono - Web framework built on Web Standards
HonoWeb application framework Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
Refine | Open-source Retool for Enterprise
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
Flowbite Svelte - UI Component Library
Svelte UI components Flowbite Svelte is a free and open-source UI component library built using Svelte based on Flowbite and Tailwind CSS. By installing the package via NPM you will be able to build modern looking web applications fast by leveraging Svelte, Tailwind CSS and Flowbite using ready-made UI components like dropdowns, navbars, modals, and more. Huge collection of UI components Open-sour
SvelteKitでSSR/SSGのプロトを爆速構築したい - Qiita
はじめに フロントエンドに触れる機会が多いのですが、SSR/SSGに詳しくなりたい（ならねばならない）という焦燥に駆られたので、勉強も兼ねて触りたいと思います。手を動かすのであれば、何かものづくりしたいなと思ったので、話題の SvelteKit で SSR/SSG のプロト構築をしてみようと思います。 最終的には、↓のプロトタイプを完成させます。素早く。 SSR / SSG とは SSR は Server Side Rendering、SSG は Static Site Generator の略です。文字通りどちらもサーバ側でレンダリングや静的サイトを作成するもので、CSR(Client Side Rendering) と対比して考えられます。世間を賑わせている React, Vue, Angular によって普及した SPA(Single Page Application) は、CSR
SvelteKit • 研ぎ澄まされた Web 開発
高速 Svelteと Vite を使用しており、 あらゆる部分にその速さが組み込まれています: 高速なセットアップ、高速な開発、高速なビルド、高速なページロード、高速なナビゲーション。 楽しい もうこれ以上、バンドラーのコンフィグやルーティング、SSR、CSP、TypeScript、デプロイの設定、その他全ての退屈な作業に時間を費やすことはありません。 コーディングに喜びを。 柔軟 SPA? MPA? SSR? SSG? 全て対応しています。SvelteKit は、構築しようとしているものが何であれ、それを実現するためのツールを提供します。 そして、JavaScript が動作するところならどこでも動作します。
Svelte と Express.js で最低限の SSR を実装する
この記事は Svelte Advent Calendar 2020 14日目の記事です。 Svelte いいですよね。このサイトも Svelte で構築しています。 軽いし、実装は楽だし、とても気に入ってます。 Svelte の特徴は、ググったらたくさん出てくると思いますが、なんと言ってもコンパイラである事だと思います。コンパイルすると、ライブラリコードがほぼ無い状態の JavaScript と CSS が作られますので、あとはそれを HTML で読み込めば完成です。このサイトを構築している JS も約80kb程度しかありません。 しかし Svelte で SSR をするには Sapper or SvelteKit などの追加モジュールのインストールが推奨になっています。 が、なんとなく Svelte だけでさくっと最低限でも SSR をやりたかったので、実装してみました。 その方法のお伝
SvelteKit • Web development, streamlined
fast Powered by Svelte and Vite, speed is baked into every crevice: fast setup, fast dev, fast builds, fast page loads, fast navigation. Did we mention it's fast? fun No more wasted days figuring out bundler configuration, routing, SSR, CSP, TypeScript, deployment settings and all the other boring stuff. Code with joy. flexible SPA? MPA? SSR? SSG? Check. SvelteKit gives you the tools to succeed wh
Svelte • The magical disappearing UI framework
compiled Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps. compact Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well. complete Built-in scoped styling, state management, motion primitives, form bi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Testing Library | Testing Library
Svelte Material UI
