UI スクリプト：サンプル

このページでは、UI スクリプトを使用して TestRail のユーザー インターフェイスをカスタマイズする方法をいくつか紹介します。先に UI スクリプトに関する背景情報が記載されている UI スクリプト：はじめにを読んでおくことをお勧めします。

管理ページを強調表示する

現在のページが管理ページの一部であるかどうかを、たとえばタイトル バーの背景色を変えるなどして視覚的に示すことができれば便利でしょう。これは、CSS だけを使用する比較的単純な UI スクリプトで簡単に実現できます。

TestRail 4.0 以降および TestRail 3.x の場合は、次のサンプルを参照してください。

TestRail 4.x (および以降) ：

name: Highlight administration pages
description: Changes the background of the user menu on admin pages
author: Gurock Software
version: 1.0
includes: ^admin

css:
#top .top-panel {
  background-color: #8B0000;
}

TestRail 3.x：

name: Highlight administration pages
description: Changes the background of the user menu on admin pages
author: Gurock Software
version: 1.0
includes: ^admin

css:
#topBar {
  background-color: #8B0000;
}

フィードバック リンクの変更 (TestRail 3.x のみ)

リンクの場所を変更したり、ユーザー インターフェイスからリンクを完全に削除するなど、TestRail のフィードバック リンクをカスタマイズしたいケースがあるかもしれません。次のサンプルは、UI スクリプトを使用してこれを実現する方法を示しています。

リンクの削除

UI スクリプトの JavaScript 部分で jQuery を使用すると、簡単にフィードバック リンクを削除できます。

name: Remove feedback link
description: Removes the feedback link from the user menu
author: Gurock Software
version: 1.0
includes: 
excludes: 

js:
$(document).ready(
  function() {
    $('#userMenu ul li:eq(1)').remove();
  }
);

これは、jQuery のセレクターを使用してページの特定の要素にアクセスする方法を示す良い例です。このセレクターの構文は、「#userMenu の番号なしリストの 2 番目の要素 (0 からカウントする) を選択する」という意味になります。

ターゲット URL を変更する

別の選択肢として、公式の TestRail サポート フォーラムの代わりに内部フォーラムまたはヘルプ デスク ページを指すようにフィードバック リンクのリンク先を変更できます。

name: Change feedback link
description: Changes the target URL of the feedback link
author: Gurock Software
version: 1.0
includes: 
excludes: 

js:
$(document).ready(
  function() {
    document.querySelector('.top-menu-highlight').classList.remove('dropdownLink');
    document.querySelector('.top-menu-highlight').href = 'http://internal-feedback-url';
  }
);

ダッシュボードのグラフを非表示にする

多くのプロジェクトで作業しているとき、TestRail のダッシュボードにより多くのプロジェクトを一度に表示できるよう、アクティビティ チャートを非表示にするとよいでしょう。下記の各 UI スクリプトは、ページからグラフを削除します。

TestRail 4.0 以降および TestRail 3.x の場合は、次のサンプルを参照してください。

TestRail 4.x (および以降) ：

name: Hide dashboard chart
description: Hides the chart on the dashboard page
author: Gurock Software
version: 1.0
includes: ^dashboard
excludes:

js:
$(document).ready(
  function() {
    $('.chart-line:first').hide();
  }
);

name: Hide dashboard chart
description: Hides the chart on the dashboard page
author: Gurock Software
version: 1.0
includes: ^dashboard
excludes:

js:
$(document).ready(
  function() {
    $('.lineChart:first').hide();
  }
);