Microsoft Playwright Setup in Visual Studio 2022: .NET C# Debugging in Containers Made Easy!

Whether you're new to Playwright or an experienced developer, this guide will help you optimize your workflow and overcome debugging hurdles. By the end, you'll have a fully functioning Playwright setup that works seamlessly within Visual Studio 2022 and Docker containers.

0:00: Introduction
1:28: Playwright website, important documents & code sample
5:58: Create Dummy Test Project to setup my-playwright-image
8:28: Add NuGet Package (Missed Install)
12:50: Add NuGet Package
14:17: Run the newly generated script file to setup the environment
14:56: Use sample code
15:26: Run locally (Not in Container)
16:42: Setup and run in headed browser
18:34: Let's run it in Container to see failure
21:00: Setup PowerShell in Dockerfile
26:26: Docker build
27:25: First successful run on container
28:08: Prepare the Dockerfile to create my own Playwright base image.
30:42: Use the base image in a new web automation project.
36:44: Experience issue & troubleshooting
39:53: Re-generate the base image that works
44:20: Use new base image and start debugging
48:31: Make some change and re-run is now faster for debugging.
49:50: Ending

# 🛠️Tools & Technologies Covered:
- Microsoft Playwright
- Visual Studio 2022
- NuGet Package Setup
- Installation step in Docker Containers
- Custom Debugging Techniques

# 📚Resources Mentioned in the Video:

# 📌 Important Links:

Here is the Dockerfile steps that I used in the video to setup my-playwright-image that I used in all my projects for web automation.

USER root
RUN apt-get update
RUN apt-get install -y wget
RUN apt-get update

###################################
##### Install PowerShell
RUN apt-get install -y powershell
WORKDIR /app

#### This stage is used to build the service project
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY . .
WORKDIR "/src/TestPlaywright"

#### This stage is used to publish the service project to be copied to the final stage
FROM build AS publish
ARG BUILD_CONFIGURATION=Release

#### This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
FROM base AS final
USER root
WORKDIR /app
COPY --from=publish /app/publish .
RUN mkdir /home/app/.cache
RUN mkdir /home/app/.cache/ms-playwright
RUN mv /root/.cache/ms-playwright /home/app/.cache
RUN chmod -R o+rwx /home/app/.cache
RUN chown -R app:app /app
RUN rm -r /app/*

FROM semifinal AS final
USER app
WORKDIR /app
RUN rm -r /app/*

# 🔗 Connect with Me:
- GitHub: Coming soon

#dotnet #playwright #csharp #visualstudio #microsoft