Session概要
Webコンテンツをチームのコーディング基準に適合させ、自動テストシステムに頼らずにコードの品質を高めるための新しい方法について。Webインスペクタの検証ツールを使用して、開発中のWebコンテンツをすばやく簡単に検証し重要な準拠事項が見落とされないようにする方法について https://developer.apple.com/videos/play/wwdc2019/514/
Web開発における考慮事項と対処
- Web開発において考慮すべき項目が多く（例えば: CSSの命名規則が適切かなど）チェックが必要
- 自動テストによって担保していることが多い
- Safari向けWebDriverを用いて有害なコード変更を検知可能
- コーディング規約を満たすかはAudit機能が利用できるWebインスペクタが良い
Auditについて
- Webインスペクタの表示
- Safariの設定から開発メニューを表示する
- 開発メニューからWebインスペクタを開く
- Webインスペクタの左側にAuditの一覧が表示される
- テストグループとテストの一覧を表示
- テストの実行結果が右側に表示
- 左下の
EditからAuditの編集、有効・無効を設定可能
- テスト結果はResults/Runフォルダに集約される
- ページをリロードしてもAuditの結果は残る
- 画面を閉じるとクリアされる
- テスト結果にはDOMのノードなども含まれる
- Auditと結果はエクスポート可能でJSONファイルに保存でき、再度importしてDOMノードを含む過去の結果を閲覧可能
- WebKitのサイト にてカスタムAuditの記述方法やフレームワークの説明が載っている
Auditの結果の種類について
- Passed
- Warning
- Failed
- Error
- Javascript側のエラー
- Unsupported
- データがサポートされていないことを意味する
アクセシビリティのテスト
- AuditにDefaultで追加されているアクセシビリティのテストがある
- 不合格となったテストは対象のDOMが表示される
- 対象DOMをクリックするとホバーで該当の要素を強調可能