Reflecting on an Incredible Year: 2024 Highlights
We are at the time of the year where we reflect on the past 12 months and look forward to the new year. 2024 was a year full of surprises, challenges, and achievements. It was a year where I had the opportunity to work on some exciting projects, meet new people, learn new things, and most importantly, focus on some personal cycling goals.
Read moreMock Power Apps connectors in tests with Playwright
Power Apps connectors allow you to connect your app to external services like SharePoint, Microsoft 365, or custom APIs. When you build a Power App, you can use these connectors to read and write data from these services. For instance, you can get a list of items from a SharePoint list, create a new item in a SharePoint list, etc.
Read moreStart testing your Power Apps with Playwright
Earlier this year, I was asked if it was possible to test Power Apps with Playwright. My answer was that it should be possible, as it is still a web application that gets created. Over the last few months, I have been working on and testing a project where I used Playwright to test a solution created in Power Apps.
Read moreSimplifying E2E testing in MFA-enabled environments with Playwright's auth sessions
A couple of months ago, I found a way to end-to-end test your solutions, which require you to log in on Microsoft with multifactor authentication enabled. The solution is to use a time-based one-time password (TOTP) that you can generate on the fly during your automated tests. info You can read more about the approach in the automating Microsoft 365 login with multi-factor authentication in Playwright tests article.
Read moreFix the Azure Function Node.js GitHub Actions Windows workflow
When deploying Node.js-based Azure Functions using GitHub Actions, you might face an issue with the Windows workflow. In the latest template, there is an issue in the build step where the actions/upload-artifact action fails to upload the artifact due to too many files. The problem is caused by the node_modules folder, which contains many files (even for a starter Azure Function project).
Read moreBreaking changes in the GitHub upload-artifact action
In August 2024, GitHub announced it would exclude hidden files by default in the actions/upload-artifact GitHub Action. If you are using this action in your workflow, you should be aware of this change, as it might break your workflow. info Read more about it on the notice of upcoming deprecations and breaking changes in GitHub Actions runners blog post from GitHub.
Read moreManage branch subdomains without Netlify DNS
In the last weeks, I have been moving the Front Matter CMS documentation and APIs to different hosting providers. The documentation and APIs were hosted on Vercel, but they stopped their open-source program, which made me look for alternatives. I decided to move the documentation to Netlify and the APIs to Azure.
Read moreSetting variables in Azure DevOps pipelines using Node.js scripts
Last week, when looking into how to configure the Microsoft Teams reporter for Playwright on Azure DevOps in combination with the Playwright Azure Reporter, I ran into a problem where a variable that set in the Node.js task was not available in the subsequent tasks. In the reporter’s code, I noticed that the variable gets set using process.
Read moreAutomating Microsoft 365 login with multi-factor authentication in Playwright tests
I have been using Playwright to automate my tests for a long time, but one thing I struggled with was automating the login flow for Microsoft 365 with a multi-factor authentication (MFA) account. When using an MFA-enabled account, you must provide an additional manual step to complete the login process.
Read moreLocally running and testing your custom GitHub Action
When developing a custom GitHub Action, you should test and run it locally before pushing it to your repository. Initially, I created a script that allowed me to run it locally, but over the weekend, I found a better way by using the @github/local-action command-line tool. Show image GitHub local-action debugger In this post, I will show you how to use the @github/local-action command-line tool to test your custom GitHub Action locally.
Read moreAutomatically create GitHub issues on failed Playwright tests
As various projects I maintain for customers include end-to-end (E2E) tests using Playwright, which run on a daily schedule and on every new release, I wanted to automate following up on failed tests. Instead of manually creating issues, I automated the process using GitHub Actions and the GitHub API. This worked great, but I thought to myself, why not share this with the world?
Read moreDispatch a GitHub Action workflow with Github script action
You can use the GitHub Actions workflow repository_dispatch event trigger to start a workflow by triggering a webhook. I use this event trigger to start a workflow for building my website when I create or update content in my blog repository. Because my website and the blog content are two separate repositories, I must use the repository_dispatch event to trigger the website build workflow.
Read moreOverride SPFx context properties during Playwright E2E tests
While creating new E2E tests for a SharePoint Framework solution, I wanted to test the solution with different permission sets. Usually, when you run your tests, you start these up with a user with the required permissions to run the tests. Instead of creating a new user with different permissions or different sites/pages to perform the tests, I looked into the possibility of overriding the context properties of SPFx.
Read moreReporting your Playwright tests to Microsoft Teams
When you work in a team that uses Microsoft Teams as its primary communication tool, it can be useful to report your test results directly to a Teams channel. This way, everyone on your team can quickly see the test results and act on them if needed. Show image Playwright test results in Microsoft Teams In this article, I will show you how you can report your Playwright test results to a Microsoft Teams channel.
Read moreCentralize your project health files for your GitHub repositories
When you manage multiple repositories on GitHub, you can centralize your project health files like issue templates, pull request templates, code of conduct, and more. By centralizing those files, you can automatically reuse them across all your repositories or overwrite them when needed. You can achieve this by creating a special repository called .
Read moreUsing GitHub Copilot's LLM in your Visual Studio Code extension
In the July 2024 release of Visual Studio Code, extension developers will be able to use GitHub Copilot’s Language Model API (LLM) to their advantage by using the Language Model API. This new Language Model API (LLM) allows you to retrieve the available LLMs in Visual Studio Code and make requests.
Read moreUtilize command URIs for efficient documentation access in Visual Studio Code
One key benefit of using command URIs in your Visual Studio Code extensions is the ability to trigger commands from links in the editor. Those links can be added to various places in the extension, such as hover cards, notifications, webviews, and completion item details. info A command URI starts with the command: scheme followed by the command name and optional arguments.
Read moreIntegrate your Visual Studio Code extension in the Source Control Management input
For a new Visual Studio Code extension called CommitHelper, I wanted to integrate the extension in the Source Control Management (SCM) input. The extension should provide a list of predefined commit messages from which the user can select by using a slash / in the input field. Show image Source Control Management Input I got the idea from the GitHub Pull Requests extension that provides a similar experience when tagging/linking issues.
Read moreHow to set the timezone for your GitHub Codespaces
A couple of days ago, someone opened an issue for Front Matter CMS about the auto-update of the modified date in their articles that did not follow the date format. In the issue, they shared a video recording of the problem. I noticed that GitHub Codespaces was used. GitHub Codespaces provides you with a cloud-based development environment for your repository.
Read moreLevel Up Your Presentations: Slidev & Demo Time in VS Code
Ever since I created the Visual Studio Code - Demo Time extension, I have been experimenting with ways of taking full advantage of presenting my slides and demos more interactively. A couple of weeks ago at Cloud Summit, I did a presentation about GitHub Actions and scripted my whole slide and demo flow with the help of the Slidev and the Demo Time extension.
Read moreFix admin consent for SharePoint token retrieval flows in your SPFx solution
There have been a couple of changes in SharePoint recently related to retrieving access tokens for your SharePoint Framework solutions. One of the changes is that MSAL V3 now uses the /_api/Microsoft.SharePoint.Internal.ClientSideComponent.Token.AcquireOBOToken API to retrieve the access token. Typically, this API was only used when loading your solution from Microsoft Teams, but it will now also be used when loading your solution from SharePoint.
Read moreUsing Playwright in combination with the Microsoft Dev Proxy on GitHub Actions
Part of the process of testing the Microsoft Dev Proxy on GitHub Actions, was to use it in combination with Playwright. The advantage of this combination is that you can use the same mocked API responses which you use during development to test your solutions. info That way you do not have to write additional code to mock your APIs in Playwright like I explained in the Test the unexpected API results with Playwright mocking article.
Read moreDeveloping custom plugins for the Microsoft's Dev Proxy
For a training project I was working on, I needed to be able to intercept some API calls for some audit logging. To do this, I decided to use Microsoft’s Dev Proxy tool, which you use to simulate, mock, and test APIs. As the Dev Proxy did not have the functionality I needed out of the box, I decided to develop a custom plugin with the help of Waldek Mastykarz.
Read moreCaching Dev Proxy in your GitHub Actions workflows
In the previous posts, I explained using the Microsoft’s Dev Proxy in a GitHub Actions workflow on a macOS and Ubuntu virtual machine. One thing I noticed is that the Dev Proxy installation fails in some runs. Show image Failed to install the Dev Proxy A way to solve this issue is by caching the Dev Proxy, and another benefit is that it speeds up your workflow.
Read moreUsing Dev Proxy in your GitHub Actions workflow on an Ubuntu hosted VM
In my previous blog post, I explained how you could use the Microsoft’s Dev Proxy in a GitHub Actions workflow on a macOS runner. In this blog post, I will show you how to use the Dev Proxy in your GitHub Actions workflow on an Ubuntu runner. info You can read how to configure it on a macOS runner in the Using Dev Proxy in your GitHub Actions workflow on a macOS runner article.
Read moreUsing Microsoft Dev Proxy in your GitHub Actions workflow on a macOS hosted VM
Lately, I have been working with the Microsoft’s Dev Proxy, a tool for API simulation, mocking, and testing. One of the things I wanted to try was to use the Dev Proxy in a GitHub Actions workflow so that I could use it in combination with Playwright to test my solutions with mocked APIs.
Read more#DevHack: Running a background service on GitHub Actions
Running background services on GitHub Actions can be helpful when you want to run some tests. For instance, start up the local server before running the tests. In my case, I was testing out Dev Proxy on GitHub Actions to see if I could use it in combination with Playwright to provide my mocks for my tests.
Read more#DevHack: Using the synchronous Azure translation API in Node.js
The Azure AI Translator service has a new synchronous API in preview. The nice thing about this API is that it does not require any Azure Storage account to be set up to which you typically need to upload the files to be translated. Instead, you can just send the document to be translated directly to the API and you will get the translated document back.
Read moreLocally verifying GitHub Actions Job Summaries
GitHub Actions Job Summaries are a great way to provide more information on your job’s output. This summary is shown in the Actions tab of your repository. Show image GitHub Actions reporter for Playwright with details markup info You can read more about it on Supercharging GitHub Actions with Job Summaries In this post, I’ll explain how you can locally develop and test your GitHub Actions Job Summary outputs using the @actions/core dependency.
Read moreUsing CLI for Microsoft 365 in TypeScript Azure Functions
The CLI for Microsoft 365 allows you to manage your Microsoft 365 tenant settings and data. It provides a powerful and flexible way to automate tasks for Microsoft 365, and lately, I have been using it in my Azure Functions to automate a couple of tasks. In this article, I will show you how to use the CLI for Microsoft 365 in TypeScript Azure Functions by explaining the following:
Read moreAdding a support link for your Visual Studio Code extension on the marketplace
While preparing a new release for Front Matter CMS, I noticed an API call to GitHub failing from the Visual Studio Code marketplace. While looking into it, it requested a SUPPORT.md file in the repository’s root. Show image VSCode Marketplace - Call for the SUPPORT.md file The VSCode Marketplace uses the following API format: https://api.
Read moreRunning .NET Azure Functions on macOS and Visual Studio Code
TypeScript is typically my go-to language for building any solution, but sometimes, you must use what is best for the job. In my current project, I am using .NET Core to build Azure Functions, and I had to get myself familiar with using .Net Core and Azure Functions on macOS.
Read moreHelp my browser keeps refreshing my SharePoint page
One of my customers reported that their SharePoint page kept refreshing in Firefox. While investigating the issue, it turned out it was an issue with the Microsoft Graph permission scope that was missing. All we had to do was approve the permission scope in the SharePoint Admin Center - API access page, and it was fixed; the page stopped refreshing.
Read moreProtect your API/auth keys by keeping those out of your Visual Studio Code settings
While implementing the i18n (internationalization) features in Front Matter CMS, I wanted to include the ability for users to use DeepL to translate their content automatically. To be able to use DeepL, you need to have an authentication key, and the user will provide this authentication key. Initially, I defined it as a configurable setting in the extension.
Read moreUsing GitHub Project webhooks to manage labeling repo issues
For managing the Front Matter CMS releases, I have been using GitHub Projects in combination with GitHub Actions for automatically labeling my issues, which I add to the Project board. I must say: “Add to my Project (classic) board.” The classic Projects experience has been discontinued, and there is a big difference when using the new Projects experience, which is creating projects on the user or organization level.
Read more