Run playwright tests on a secured SPA

Question

I'm trying to run a CI/CD pipeline that will test an angular website. The website itself is shielded using MSAL so that users first need to login. The authorization is handled through oauth with Azure AD.

If we follow the guideline of playwright, it seems we need to perform the actual login by passing the username and password. ( https://playwright.dev/docs/auth#automate-logging-in ) But of course, I do not want to put that data directly into any readable code.

So is there a way to use Azure Keyvault in the ci/cd pipeline in devops to pass the correct data to playwright?

The playwright tests are also containerized and running inside a docker container.

Answer 1

So is there a way to use Azure Keyvault in the ci/cd pipeline in devops to pass the correct data to playwright?

It must be made clear that there is no way to interactively input information during the operation of the DevOps pipeline. If you want an interactive method to input data, then the answer is NO.

But if you don't need an interactive method to input data, only getting data from azure key vault to docker to typescript code, please check the below information.

1, Select a service connection and make sure this service connection(The type of this service connection should be Azure Resource Manager) have required permission to the azure key vault.

2, After the azure key vault be successfully linked to variable group in DevOps pipeline tab, then you can use these azure key vault secrets as runtime variable in DevOps pipeline definition. And then you can pass the variable to docker and code.

azure-pipelines.yml

trigger:
- none
variables:
- group: MyGroup

steps:
- powershell: |
   docker pull node:latest
  displayName: 'PowerShell Script'
- task: Docker@2
  displayName: build
  inputs:
    command: build
    Dockerfile: Dockerfile
    arguments: '--build-arg SECRET=$(versionxxx)'   #The versionxxx is the key on azure key vault side, and the value of it is yyy.

Dockerfile

FROM node:latest
COPY . /mydir/
ARG SECRET
ENV SECRET_KEY $SECRET
RUN cd mydir \
    && ls \
    && node test.ts

test.ts

let myName = "Bowman Zhu";
console.log("=================================================");
console.log(myName);
console.log(process.env.SECRET_KEY);

After run the pipeline, I can get the azure key vault secret value with no problem:

This is my repository structure: