Githubアクションから静的ウェブアプリケーションURLへのアクセス

私は最近、プロジェクトに取り組んでいました.私は、CCI/CDパイプラインの間のヘッドホンテストを実行するために、Playwrightを使ってテストを加えたいと思っていました.
ありがたいことに、私の同僚はすでにそれを行う方法についてのブログ記事を書いています.
テストがmainブランチで実行されているときに、これはうまく動作しますが、静的なWebアプリケーションではpre-production environments for pull requestsとなり、独自のURLで展開されます.
今、私のテストには問題があります.

test("basic test", async ({ page }) => {
    await page.goto("https://bit.ly/recipes-for-aj");
    await expect(page).toHaveTitle("Recipes 4 AJ");

    await page.locator("text=Tags").click();
});

それは常に生産現場に移動しますので!では、どうやってこれを解決できますか?

展開のURLを見つける

スタティックWebアプリケーションの展開のログを調べた場合、URLがそこに出力されていることに気付きました.カスタムドメインを持つURLかPRのプリプロダクション環境URLであるかどうかにかかわらず、GithubアクションはURLを認識しています.
次の停止、 azure/static-web-apps-deploy は、アクションがどのように動作するかを見てください.それは私たちがそれの内部を見ることができないことを意味します、しかし、それは我々が actions.yaml をチェックして、以下を見ることができるので、それは大きな問題でありません:

outputs:
    static_web_app_url:
        description: "Url of the application"

すごい!アクションは実際にURLを出力します.

ジョブ全体の出力の使用

Nityaのパターンに従って、我々はワークフローで新しい仕事を作成して、PlayWrightテストを実行します.

jobs:
    build_and_deploy_job:
        # snip

    test:
        name: "Test site using Playwright"
        timeout-minutes: 60
        needs: build_and_deploy_job
        runs-on: ubuntu-20.04
        steps:
        - uses: actions/checkout@master
        - uses: actions/setup-node@v2
            with:
            node-version: '14.x'

        - name: Install dependencies
            run: |
                cd testing
                npm ci
                npx playwright install-deps
                npx playwright install
        - name: Run Playwright Tests
            continue-on-error: false
            working-directory: testing
            run: |
                npx playwright test --reporter=html --config playwright.config.js

また、環境変数を使用してURLを提供するテストを更新します.

test("basic test", async ({ page }) => {
    await page.goto(process.env.SWA_URL);

    // Be assertive
});

環境変数として取得するには、まずbuild_and_deploy_jobから出力しなければなりません.

jobs:
    build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and deploy website
        outputs:
            static_web_app_url: ${{ steps.swa.outputs.static_web_app_url }}
        steps:
        - uses: actions/checkout@v3
            with:
            submodules: true
        - name: Build And Deploy
            id: swa
            # snip

重要な部分はstatic_web_app_url: ${{ steps.swa.outputs.static_web_app_url }}であり、step swaがこのjobの出力をしたい出力を持つというGithubの行動を伝えていた.
以下のように私たちのtestジョブで使用できます.

test:
    name: "Test site using Playwright"
    timeout-minutes: 60
    needs: build_and_deploy_job
    runs-on: ubuntu-20.04
    env:
        SWA_URL: ${{ needs.build_and_deploy_job.outputs.static_web_app_url }}
    steps:
    # snip

スニペット${{ needs.build_and_deploy_job.outputs.static_web_app_url }}は、依存しているジョブ(needs.build_and_deploy_job)の出力を見て、我々が望むものを見つけて、環境変数としてそれをセットするために、Githubアクションに指示します.
そして、そのように、もはやあなたのテストのためのハードコードURLを持っている必要があります.

結論

Githubアクションステップと仕事からoutput変数を活用することによって、我々はPlayWrightを使って自動化されたテストのような何かをすることになるとき、我々のGithubワークフローを単純化することができます.
あなたが私が作った変更を見ることができるように、私はPR for Nitya's sample applicationを作成しました、そして、どのようにgithubアクションが現在動くかについて示します.