Implement Brave VPN on Desktop

Test plan (and issues)

Test cases capture the issues that they fix in each section

Marked as release-notes/exclude since this is still behind a flag (defaulted to off); we’ll need to change that behavior to make the feature customer facing.

Related resources

• Figma https://www.figma.com/file/qtMYwoj3JWJO5xzwLt6j2f/Desktop-VPN
• Security review https://github.com/brave/security/issues/772 (has link to spec)

Steps to enable the VPN functionality (do on fresh profile before testing)

• Allow for VPN on Beta

This is a pre-requisite step; this has to be done before any tests are attempted.

• VPN is only implemented for Windows and macOS (Linux captured in a VPN part 2 issue here).
• As of this writing, VPN is still behind a feature flag and is only enabled on BETA and NIGHTLY.

1. Fresh profile (or not; depending on the test case)
2. Set brave://flags/#skus-sdk to ENABLED
3. Set brave://flags/#brave-vpn to ENABLED
4. Set brave://flags/#skus-environment to DEVELOPMENT
5. Close the browser and re-open it
6. Verify VPN is enabled (look for VPN button next to hamburger menu)

VPN button and entry in hamburger menu

• Add stub brave vpn button to toolbar
• Add Brave VPN to hamburger menu
• Add vpn button toggle option in settings
• VPN should have a right click to hide
• Debug crash when changing theme color (due to VPN button)
• VPN button text should be theme/contrast-aware

Verify the button is visible

1. You should see a VPN button (next to hamburger button)
2. You should also see a Brave VPN entry in hamburger menu

Context menu behavior

1. If you right click VPN button you should get a context menu
2. Choose Hide VPN button from toolbar from the context menu and verify the button is hidden
3. Go into hamburger menu, pick Brave VPN, and choose Show VPN button in toolbar. Verify button shows again
4. Go into hamburger menu, pick Brave VPN, and choose Hide VPN button in toolbar. Verify button is hidden
5. Go into hamburger menu, pick Brave VPN, and choose Show VPN button in toolbar

Theming behavior

1. Visit brave://settings/manageProfile
2. Change your theme color to orange colors (like the Brave lion!)
3. Verify Brave doesn’t crash 😄
4. Verify that the VPN button adjusts its colors accordingly
5. Change your theme back to the default

Brave Premium login

• Stripe session/checkout error trying to purchase VPN with experimental SKU SDK
• Detect and store VPN state after sign-in

Purchasing VPN with a new account

1. Visit https://account.brave.software (Development) and sign into a new account
2. Purchase VPN (browse plans, do checkout process; use a test credit card 4111 1111 1111 1111 / 12/24 for example - or see https://stripe.com/docs/testing?numbers-or-method-or-token=card-numbers#visa)
3. Verify purchase works; you should be returned to account.brave.software
4. VPN should show as purchased (you should NOT see Complete your purchase to begin using Brave VPN)
5. Click the Refresh Brave VPN button and you should see green text saying YOU HAVE ACTIVE CREDENTIALS LOADED!
6. Click VPN button (top right by hamburger) and you should see the on/off toggle and your default region

Login to an existing account which has VPN

1. On a different profile than above (see Purchasing VPN with a new account), visit https://account.brave.software (Development) and sign into the same account
2. VPN should show as purchased (you should NOT see Complete your purchase to begin using Brave VPN)
3. Click the Refresh Brave VPN button and you should see green text saying YOU HAVE ACTIVE CREDENTIALS LOADED!
4. Click VPN button (top right by hamburger) and you should see the on/off toggle and your default region
5. It could be handy to copy this folder and keep it handy as a “fresh logged in profile” (in tests below)

OS integration

• Notify more detailed VPN connecting status change on Windows
• BraveVPNOSConnectionAPI should detect OS’s vpn status

Toggle VPN in operating system (with Brave open)

1. Have Brave open with VPN button visible
2. Have a working connection (region doesn’t matter). Verify you can connect/disconnect in Brave.
3. Keep Brave open and go to your OS’s VPN section.
   • On Windows, you can push Windows key and type VPN settings to get there
   • macOS shows under Settings > Networking
4. Find the BraveVPN connection
5. Manually connect to the VPN using the OS interface
6. Verify that Brave’s VPN button lights up Green when connected
7. Verify that Brave’s VPN button shows as gray when not connected

Toggle VPN in operating system (with Brave closed)

1. Have Brave open with VPN button visible
2. Have a working connection (region doesn’t matter). Verify you can connect/disconnect in Brave.
3. Close Brave
4. Go to your OS’s VPN section.
   • On Windows, you can push Windows key and type VPN settings to get there
   • macOS shows under Settings > Networking
5. Find the BraveVPN connection
6. Manually connect to the VPN using the OS interface
7. In a different browser (Edge, Safari, Chrome) visit https://whatismyipaddress.com/
8. Verify that you’re in the appropriate region (where you connected manually in step 2)

Visible user interface

• VPN panel (logged in to Brave Premium)
• VPN panel (NOT logged in to Brave Premium)
• VPN panel (login expires)
• VPN Panel - create a basic server selection UI w/o service logic
• Handle not having permission to write config (macOS)
• Determine default vpn region based on user’s timezone or country code
• [Desktop VPN] Add region flag icons to vpn region list
• Add sending email form for VPN Support

Notes before testing

Please refer to the Figma as you test: https://www.figma.com/file/qtMYwoj3JWJO5xzwLt6j2f/Desktop-VPN

This should be accurate and captures expected look and feel for both light and dark mode (we’ll want to test both).

Purchase entry points

This would be on a fresh profile after enabling the VPN feature

1. Click the VPN button (top right, next to hamburger button)
2. Panel will show up and have the sales information (Buy / Already purchased?).
3. Interact (verify links go to the right place, etc)
4. Click the VPN button again to hide the panel
5. Click Brave VPN in the hamburger menu
6. Verify the sale panel shows up

Post-purchase UX

Default region selection

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see a default region picked which is nearest to your location (based on time zone)
4. Set your OS time to be in another region (like Japan)
5. Create another fresh profile and get setup with VPN
6. Click VPN button
7. Verify it shows region close to where you picked (ex: Japan)

Verify connecting works and connected/unconnected state shows properly

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Enable VPN
4. Verify that Brave’s VPN button lights up Green when connected
5. Visit https://whatismyipaddress.com/
6. The website should show you as being in the VPN region now 🎉
7. Check hamburger menu > Brave VPN and ensure toggle there shows as connected
8. Click the toggle (disconnect) in hamburger menu > Brave VPN
9. Verify that Brave’s VPN button shows as gray when not connected
10. Visit https://whatismyipaddress.com/
11. You should be back in your regular region now

macOS - Handle no permission to write config

1. Fresh profile; enable Brave VPN / SKU
2. Go to Settings > Networking and remove any occurrences of Brave VPN
3. Connect to VPN
4. You should be presented with the dialog from https://github.com/brave/brave-browser/issues/22109
5. Click Don't allow
6. You should see a warning like the one under Error message - VPN Connection not allowed in Figma

Verify you can change regions

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see the default region with a > arrow. Click that to show regions
4. Region list should show. The choices listed are coming from Guardian VPN.
5. Choose a different region and connect
6. Verify you can connect; confirm you’re in that region using https://whatismyipaddress.com/
7. Disconnect from VPN
8. Choose a different region and connect
9. Verify connect works; confirm you’re in that region using https://whatismyipaddress.com/
10. Without disconnecting, choose a different region and connect
11. Verify that VPN disconnects and reconnects; confirm you’re in that region using https://whatismyipaddress.com/

Setttings

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Click the gear button to go into Settings
4. Verify navigation works (ex: you can go back; clicking Contact technical support opens a new screen; you can go back from that)

Creating a support ticket

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Click the gear button to go into Settings
4. Click Contact technical support
5. Fill out the support form. Feel free to try to break it 😄 Provide an email you have access to read
6. Submit form when ready
7. Check with a Guardian team member to confirm if ticket was received

Edge cases and error states

Can’t connect to server UI

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Unplug your network cable (or disable WiFi)
3. Click the VPN button (top right, next to hamburger button)
4. Click the toggle to enable
5. You should see the error about not being able to connect
6. Plug network cable back in OR enable WiFi (disabled in step 2)
7. Click the Try again button
8. It should work now

Preferences

1. Visit brave://settings/appearance
2. Verify there is a setting Show VPN button
3. Test it out; toggling should show and hide the button next to hamburger menu

Original issue description

Overall goal is to implement a VPN manager within Brave that can create connection, connect, disconnect, and remove a connection. The connection will show in the OS’s VPN area for OSes that support that

• Backend integration (TBD - authenticating purchase, etc)
• Windows https://github.com/brave/brave-browser/issues/15805
• macOS https://github.com/brave/brave-browser/issues/15810

History (pathfinding, proof of concept info, etc) available in the employee only issue: https://github.com/brave/internal/issues/729

Android is currently a WIP which is tracked with https://github.com/brave/brave-browser/issues/12197 and https://github.com/brave/brave-browser/issues/14048 - development done by @deeppandya

iOS is already live; please see https://github.com/brave/brave-ios/issues/2739 along with https://github.com/brave/brave-ios/pulls?q=is%3Apr+VPN+is%3Aclosed+sort%3Aupdated-desc

Subtasks not covered in test plan

• Makes VPN Service fetch/cache region list
• Add state machine to vpn service
• Load VPN urls from app menu
• Pass vpn urls to webui via mojo
• Add purchased state in brave_vpn.mojom and manage it in service
• Fetch hostnames for selected vpn region and cache it in service
• Store fetched region list/device region in prefs and update it periodically in background
• Wiring up BraveVPNService with BraveVPNOSConnectionAPI
• Create vpn panel handler for webui to call and interface it with mojom
• Add mojo observer to vpn desktop service
• Get all regions in desktop vpn service and expose to mojom
• Get region list from the desktop service to webui
• Add vpn lifecycle events to webui
• Add gradient animation
• Add “not allowed state” to connection state
• VPN Panel WebUI should be chrome-untrusted

[stephendonner]

Verification PASSED using

Builds: 1.39.89 & 1.39.100

OS/arch: macOS-x64/Intel 11.6.5 (Big Sur)

NOTE: the VPN flag isn’t available in release-channel builds, so VPN was not testable using the RC:

Brave | 1.39.109 Chromium: 102.0.5005.50 (Official Build) (x86_64)
-- | --
Revision | f6e2cf8f59ec714bdcff8499991d55898875f287-refs/branch-heads/5005@{#648}
OS | macOS Version 11.6.6 (Build 20G624)

SKU flags	no VPN flag

NOTE: It will be tested heavily again in 1.40.x, and an issue tracking remaining verification work will be created, post-release of 1.39.x

Initial Setup

Shared VPN-Setup Steps - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB

Confirmed I was able to purchase and use a Brave VPN subscription, from end-to-end, defaulting to USA (West):

example	example	example	example	example	example

Suggested: also set Show VPN status in menu bar via Apple -> System Preferences -> Network for BraveVPN:

Between-test cleanup

BraveVPN OS-config removal - PASSED

In-between clean-profile tests, you should remove the BraveVPN config in your Apple -> System Preferences -> Network panel. No restart necessary.

example	example	example	example

UI

Theme support - PASSED

1. open brave://settings/manageProfile
2. change your theme color
3. verify Brave doesn’t crash
4. verify the VPN button adjusts its colors (background, text) accordingly

example	example	example	example

Dark & Light Brave colors support - PASSED

1. visit brave://settings/appearance
2. choose the opposite color (if Light, switch to Dark)
3. examine the various VPN UI elements and ensure they are legible
4. switch back to the opposite color, and do the same

Dark

toggle	location-select	button dialog	contact technical support	(context-click) button dialog	edit your payment

Light

toggle	location-select	button dialog	contact technical support	(context-click) button dialog	edit your payment

brave://settings/appearance - PASSED

VPN button

• open brave://settings/appearance
• confirm Show VPN button is toggled to ON by default
• toggle it to OFF
• confirm the VPN button disappears from the toolbar in real-time
• restart Brave; confirm it’s still gone
• toggle it back to ON
• confirm it appears and remains, after restart

example	example

VPN button and dialog links - PASSED

• Hide VPN button in toolbar - hides the icon; re-enable via brave://settings/appearance - see Settings section, below
• Send Feedback goes to https://support.brave.com/hc/en-us
• About Brave VPN goes to https://brave.com/firewall-vpn/
• Manage my plan goes to https://account.brave.software/

Hide VPN button 1	Hide VPN button 2	Send Feedback	About Brave VPN	Manage my plan

Hamburger flyout menu - PASSED

Click on the “hamburger” menu icon on the browser toolbar

Brave VPN toggle, Connected	Brave VPN toggle, Disconnected	Hide VPN button in toolbar, 1	Hide VPN button in toolbar, 2	Send feedback	About Brave VPN	Manage my plan

VPN-button settings dialog - FAILED

Manage subscription	Contact technical support	About Brave Firewall + VPN
https://github.com/brave/brave-browser/issues/22694		https://github.com/brave/brave-browser/issues/22695

Logged:

• https://github.com/brave/brave-browser/issues/22694
• https://github.com/brave/brave-browser/issues/22695

Brave Premium login

Purchasing VPN with a new account - PASSED

Steps:

Followed steps from Shared VPN-Setup Steps, and verified above.

Log in to an existing account which has VPN - PASSED

Steps:

1. install 1.39.x
2. launch Brave
3. enable both SKU flags and the VPN flag on brave://flags
4. clicked on the Relaunch button
5. loaded account.brave.software
6. entered the credentials from 1Password
7. entered my previously-created account’s email and clicked on Get login link
8. opened the email and clicked on the link
9. confirmed I landed on account.brave.software/account, which showed my active Brave VPN Subscription under Your plan subscriptions
10. clicked on the Refresh Brave VPN button
11. confirmed a green YOU HAVE ACTIVE CREDENTIALS LOADED! banner appeared above the VPN entry
12. clicked on the VPN button on the toolbar
13. clicked to (attempt to) toggle it from DISCONNECTED to CONNECTED
14. clicked Allow when prompted to configure the VPN config in macOS
15. clicked again on the now-green VPN button, and confirmed I was connected to USA (West)

example	example	example	example	example

Post-purchase UX

Default region selection - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see a default region picked which is nearest to your location (based on timezone)
4. Set your OS timezone to be in another region (like Japan)
5. Create another fresh profile and get set up with VPN
6. Click VPN button
7. Verify it shows the region close to where you picked (ex: Japan)

default region	Japan, Standard Time	new VPN profile	auto-detected region	IP/location details

Connecting/disconnecting - PASSED*

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Enable VPN
4. Verify that Brave’s VPN button lights up Green when connected
5. Visit https://www.ip2location.com/demo
6. The website should show you as being in the VPN region now 🎉
7. Check hamburger menu > Brave VPN and ensure toggle there shows as connected
8. Click the toggle (disconnect) in hamburger menu > Brave VPN
9. Verify that Brave’s VPN button shows as gray when not connected
10. Visit https://www.ip2location.com/demo
11. You should be back in your regular region now

example	example	example

NOTE: this test is good, but basic, and connecting/reconnecting issues will (still) be further tested after this verification.

For bonus points/extra credit/gold star ⭐ , alternate the above Brave VPN connection-toggle method with:

• flyout menu
• Network control panel in System Preferences
• system bar (top of macOS)

Logged:

• https://github.com/brave/brave-browser/issues/22728

Changing regions - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see the default region with a > arrow. Click that to show regions
4. Region list should show. The choices listed are coming from Guardian VPN.
5. Choose a different region and connect
6. Verify you can connect; confirm you’re in that region using whatismyipaddress.com
7. Disconnect from VPN
8. Choose a different region and connect
9. Verify connect works; confirm you’re in that region using whatismyipaddress.com
10. Without disconnecting, choose a different region and connect
11. Verify that VPN disconnects and reconnects; confirm you’re in that region using whatismyipaddress.com

auto-detected region	region list	region list, part 2	1st region	2nd region

OS integration/connectivity

Toggle VPN in operating system (with Brave open) - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, and then:

• confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
• open the Apple menu -> System Preferences -> Network
• find the BraveVPN connection
• click on Connect
• confirm the VPN button icon lights up green in the toolbar
• confirm you are connected to the VPN

example	example	example	example

Toggle VPN in operating system (with Brave closed) - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, and then:

• confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
• close Brave
• open the Apple menu -> System Preferences -> Network
• find the BraveVPN connection
• click on Connect
• load ip2location.com/demo using Firefox (or Chrome, Safari, or Edge…)

example	example	example	example

Creating a support ticket - PASSED

Verified in https://github.com/brave/brave-browser/issues/18469#issuecomment-1112771226

Logged:

• https://github.com/brave/brave-browser/issues/22731

Edge cases and error states

Cancel plan - FAILED

(UI unimplemented)

Logged:

• https://github.com/brave/brave-browser/issues/22694

Edit payment - FAILED

(UI unimplemented)

Logged:

• https://github.com/brave/brave-browser/issues/22694
• https://github.com/brave/brave-browser/issues/22717

Expired credit card / credentials - FAILED

1. Complete the steps under Brave Premium login > Purchasing VPN with a new account, making sure to specify the current month and year for the credit card’s expiration date
2. confirm you can connect to your new Brave VPN account
3. open Date & Time in System Preferences and advance the OS date to the 1st of next month
4. connect to Brave VPN
5. confirm you get the Edit your payment dialog

card details	system clock	VPN-button dialog

Logged:

• https://github.com/brave/brave-browser/issues/22972

Can’t connect to server UI - FAILED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Unplug your network cable (or disable Wi-Fi)
3. Click the VPN button (top right, next to hamburger button)
4. Click the toggle to ENABLE
5. You should see the error about not being able to connect
6. Plug network cable back in OR enable Wi-Fi (disabled in step 2)
7. Click the Try again button
8. Confirm you can reconnect

actual (fails)	Figma	after restart (works)

Logged:

• https://github.com/brave/brave-browser/issues/22754

Limit of 5 VPN-connected devices/profile, on the same account (email address) - FAILED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, using the same email address for each. Ensure you can use each VPN instance successfully (and concurrently) for devices/profiles 1-5.

device 1	device 2	device 3	device 4	device 5

Logged:

• https://github.com/brave/brave-browser/issues/22757

Security & privacy

DNS leak (ISP) - PASSED

1. connect to any region
2. load https://browserleaks.com/dns
3. confirm your local (ISP) DNS resolvers are not shown; they should be from the connected VPN region
4. disconnect from VPN
5. reload https://browserleaks.com/dns
6. confirm your local (ISP) DNS resolvers are shown

BraveVPN DNS resolvers	local ISP resolvers

Known issues:

• https://github.com/brave/brave-browser/issues/22163

DNS-over-HTTP (DoH) - PASSED

1. connect to VPN
2. enable DNS over HTTP using any provider, via brave://settings/security
3. load browserleaks.com/dns
4. confirm the provider’s resolvers are shown (NOT your local ISP’s)

brave://settings/security	browserleaks.com/dns

TOR - PASSED

1. connect to VPN
2. open a New Private window with Tor
3. load check.torproject.org
4. ensure you see Congratulations. This browser is configured to use Tor

Torrent (via WebTorrents support) - PASSED

1. run through the Shared VPN-Setup Steps section
2. disconnect from BraveVPN
3. load https://ipleak.net/
4. click on Activate under Torrent Address detection
5. click on this Magnet Link (it’ll open in a new window)
6. reload the URL (to work around a bug)
7. click on Start Torrent
8. return to the https://ipleak.net/ tab
9. confirm that you see your public (local ISP) IP address
10. connect to BraveVPN via your preferred method (flyout menu, button toggle, macOS system bar (top), and Network control panel in System Preferences)
11. shift + reload the page (to purge cache) <------ IMPORTANT
12. repeat steps 4-8
13. confirm you now see the appropriate VPN IP address (for your region)
14. switch to another region (for bonus points)

step 9 - AT&T ISP	step 13 - USA (West)	step 14 - Switzerland

WebRTC - PASSED

1. connect to BraveVPN
2. load https://browserleaks.com/webrtc
3. iterate through the values for WebRTC IP handling policy
4. note the absence/presence and value of both local + public IP addresses, as reflected by their respective setting

VPN connected

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP

Disconnected from VPN

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP

Keyboard accessibility - FAILED

1. set up VPN
2. click on the VPN button on the browser toolbar
3. click on the Settings (gear) icon
4. press tab to forward-cycle through elements
5. press shift + tab to backwards-cycle through the dialog links
6. confirm you can press spacebar and return to select (“click”) links

Logged:

• https://github.com/brave/brave-browser/issues/22631
• https://github.com/brave/brave-browser/issues/22632
• https://github.com/brave/brave-browser/issues/22732

Issues encountered while testing:

• https://github.com/brave/brave-browser/issues/22676
• https://github.com/brave/brave-browser/issues/22677
• https://github.com/brave/brave-browser/issues/22653
• https://github.com/brave/brave-browser/issues/22636
• https://github.com/brave/brave-browser/issues/22632
• https://github.com/brave/brave-browser/issues/22631
• https://github.com/brave/brave-browser/issues/22713
• https://github.com/brave/brave-browser/issues/22710
• https://github.com/brave/brave-browser/issues/22711
• https://github.com/brave/brave-browser/issues/22726
• https://github.com/brave/brave-browser/issues/22728
• https://github.com/brave/brave-browser/issues/22628
• https://github.com/brave/brave-browser/issues/22731
• https://github.com/brave/brave-browser/issues/22732
• https://github.com/brave/brave-browser/issues/22754
• https://github.com/brave/brave-browser/issues/22757
• https://github.com/brave/brave-browser/issues/22882
• https://github.com/brave/brave-browser/issues/22883
• https://github.com/brave/brave-browser/issues/22972

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.39.96 Chromium: 101.0.4951.54 (Official Build) beta (64-bit)
-- | --
Revision | 67da1aeb32cedd27634ca6634fb79cbd85d3f0ab-refs/branch-heads/4951@{#1126}
OS | Windows 10 Version 21H2 (Build 19044.1645)

Encountered and logged the following issues:

VPN status doesn’t show the connected state when brave is auto-upgraded #23080 VPN can’t be reconnected in the same session when internet/wifi is disconnected and reconnected #23081

Initial Setup

Shared VPN-Setup Steps - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB

Confirmed I was able to purchase and use a Brave VPN subscription, from end-to-end, defaulting to USA (East):

example	example	example	example	example

Suggested: also set Show VPN status in menu bar via Manage Notifications->Settings->BraveVPN

Between-test cleanup

BraveVPN OS-config removal - PASSED

In-between clean-profile tests, you should remove the Manage Notifications->Settings->BraveVPN

example	example	example

UI

Theme support - PASSED

1. open brave://settings/manageProfile
2. change your theme color
3. verify Brave doesn’t crash
4. verify the VPN button adjusts its colors (background, text) accordingly

example	example	example	example

Dark & Light Brave colors support - PASSED

1. visit brave://settings/appearance
2. choose the opposite color (if Light, switch to Dark)
3. examine the various VPN UI elements and ensure they are legible
4. switch back to the opposite color, and do the same

Dark

toggle	location-select	button dialog	contact technical support	(context-click) button dialog	edit your payment

Light

toggle	location-select	button dialog	contact technical support	(context-click) button dialog	edit your payment

brave://settings/appearance - PASSED

VPN button

• open brave://settings/appearance
• confirm Show VPN button is toggled to ON by default
• toggle it to OFF
• confirm the VPN button disappears from the toolbar in real-time
• restart Brave; confirm it’s still gone
• toggle it back to ON
• confirm it appears and remains, after restart

example	example

VPN button and dialog links - PASSED

• Hide VPN button in toolbar - hides the icon; re-enable via brave://settings/appearance - see Settings section, below
• Send Feedback goes to https://support.brave.com/hc/en-us
• About Brave VPN goes to https://brave.com/firewall-vpn/
• Manage my plan goes to https://account.brave.software/

Hide VPN button 1	Hide VPN button 2	Send Feedback	About Brave VPN	Manage my plan

Hamburger flyout menu - PASSED

Click on the “hamburger” menu icon on the browser toolbar

Brave VPN toggle, Connected	Brave VPN toggle, Disconnected	Hide VPN button in toolbar, 1	Hide VPN button in toolbar, 2	Send feedback	About Brave VPN	Manage my plan

VPN-button settings dialog - FAILED

Encountered https://github.com/brave/brave-browser/issues/22694 Encountered https://github.com/brave/brave-browser/issues/22695

Contact technical support

Brave Premium login

Purchasing VPN with a new account - PASSED

Steps:

Followed steps from Shared VPN-Setup Steps, and verified above.

Log in to an existing account which has VPN - PASSED

Steps:

1. install 1.39.x
2. launch Brave
3. enable both SKU flags and the VPN flag on brave://flags
4. clicked on the Relaunch button
5. loaded account.brave.software
6. entered the credentials from 1Password
7. entered my previously-created account’s email and clicked on Get login link
8. opened the email and clicked on the link
9. confirmed I landed on account.brave.software/account, which showed my active Brave VPN Subscription under Your plan subscriptions
10. clicked on the Refresh Brave VPN button
11. confirmed a green YOU HAVE ACTIVE CREDENTIALS LOADED! banner appeared above the VPN entry
12. clicked on the VPN button on the toolbar
13. clicked to (attempt to) toggle it from DISCONNECTED to CONNECTED
14. clicked Allow when prompted to configure the VPN config in macOS
15. clicked again on the now-green VPN button, and confirmed I was connected to USA (West)

example	example	example

Post-purchase UX

Default region selection - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see a default region picked which is nearest to your location (based on timezone)
4. Set your OS timezone to be in another region (like Japan)
5. Create another fresh profile and get set up with VPN
6. Click VPN button
7. Verify it shows the region close to where you picked (ex: Japan)

US region	IP/location details	autodetected region US (East)	IN region	IP/location details	autodetected region Singapore

Connecting/disconnecting - PASSED*

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Enable VPN
4. Verify that Brave’s VPN button lights up Green when connected
5. Visit https://www.ip2location.com/demo
6. The website should show you as being in the VPN region now 🎉
7. Check hamburger menu > Brave VPN and ensure toggle there shows as connected
8. Click the toggle (disconnect) in hamburger menu > Brave VPN
9. Verify that Brave’s VPN button shows as gray when not connected
10. Visit https://www.ip2location.com/demo
11. You should be back in your regular region now

example	example	example

NOTE: this test is good, but basic, and connecting/reconnecting issues will (still) be further tested after this verification.

For bonus points/extra credit/gold star ⭐ , alternate the above Brave VPN connection-toggle method with:

• flyout menu
• Network control panel in System Preferences
• system bar (top of macOS)

Encountered:

• https://github.com/brave/brave-browser/issues/22728

Changing regions - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see the default region with a > arrow. Click that to show regions
4. Region list should show. The choices listed are coming from Guardian VPN.
5. Choose a different region and connect
6. Verify you can connect; confirm you’re in that region using whatismyipaddress.com
7. Disconnect from VPN
8. Choose a different region and connect
9. Verify connect works; confirm you’re in that region using whatismyipaddress.com
10. Without disconnecting, choose a different region and connect
11. Verify that VPN disconnects and reconnects; confirm you’re in that region using whatismyipaddress.com

auto-detected region	region list	region list, part 2	1st region	2nd region

OS integration/connectivity

Toggle VPN in operating system (with Brave open) - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, and then:

• confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
• open the Apple menu -> System Preferences -> Network
• find the BraveVPN connection
• click on Connect
• confirm the VPN button icon lights up green in the toolbar
• confirm you are connected to the VPN

example	example	example	example

Toggle VPN in operating system (with Brave closed) - PASSED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, and then:

• confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
• close Brave
• open the Apple menu -> System Preferences -> Network
• find the BraveVPN connection
• click on Connect
• load ip2location.com/demo using Firefox (or Chrome, Safari, or Edge…)

example	example	example	example

Creating a support ticket - PASSED

Verified in https://github.com/brave/brave-browser/issues/18469#issuecomment-1112771226

Encountered:

• https://github.com/brave/brave-browser/issues/22731

Edge cases and error states

Cancel plan - FAILED

(UI unimplemented)

Encountered:

• https://github.com/brave/brave-browser/issues/22694

Edit payment - FAILED

(UI unimplemented)

Encountered:

• https://github.com/brave/brave-browser/issues/22694
• https://github.com/brave/brave-browser/issues/22717

Expired credit card / credentials - FAILED

1. Complete the steps under Brave Premium login > Purchasing VPN with a new account, making sure to specify the current month and year for the credit card’s expiration date
2. confirm you can connect to your new Brave VPN account
3. open Date & Time in System Preferences and advance the OS date to the 1st of next month
4. connect to Brave VPN
5. confirm you get the Edit your payment dialog

card details	system clock	VPN-button dialog

Encountered:

• https://github.com/brave/brave-browser/issues/22972

Can’t connect to server UI - FAILED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Unplug your network cable (or disable Wi-Fi)
3. Click the VPN button (top right, next to hamburger button)
4. Click the toggle to ENABLE
5. You should see the error about not being able to connect
6. Plug network cable back in OR enable Wi-Fi (disabled in step 2)
7. Click the Try again button
8. Confirm you can reconnect

Encountered:

• https://github.com/brave/brave-browser/issues/22754

Limit of 5 VPN-connected devices/profile, on the same account (email address) - FAILED

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, using the same email address for each. Ensure you can use each VPN instance successfully (and concurrently) for devices/profiles 1-5.

device 1	device 2	device 3	device 4	device 5

Encounter:

• https://github.com/brave/brave-browser/issues/22757

Security & privacy

DNS leak (ISP) - PASSED

1. connect to any region
2. load https://browserleaks.com/dns
3. confirm your local (ISP) DNS resolvers are not shown; they should be from the connected VPN region
4. disconnect from VPN
5. reload https://browserleaks.com/dns
6. confirm your local (ISP) DNS resolvers are shown

BraveVPN DNS resolvers	local ISP resolvers

Known issues:

• https://github.com/brave/brave-browser/issues/22163

DNS-over-HTTP (DoH) - PASSED

1. connect to VPN
2. enable DNS over HTTP using any provider, via brave://settings/security
3. load browserleaks.com/dns
4. confirm the provider’s resolvers are shown (NOT your local ISP’s)

brave://settings/security	browserleaks.com/dns

TOR - PASSED

1. connect to VPN
2. open a New Private window with Tor
3. load check.torproject.org
4. ensure you see Congratulations. This browser is configured to use Tor

Torrent (via WebTorrents support) - PASSED

1. run through the Shared VPN-Setup Steps section
2. disconnect from BraveVPN
3. load https://ipleak.net/
4. click on Activate under Torrent Address detection
5. click on this Magnet Link (it’ll open in a new window)
6. reload the URL (to work around a bug)
7. click on Start Torrent
8. return to the https://ipleak.net/ tab
9. confirm that you see your public (local ISP) IP address
10. connect to BraveVPN via your preferred method (flyout menu, button toggle, macOS system bar (top), and Network control panel in System Preferences)
11. shift + reload the page (to purge cache) <------ IMPORTANT
12. repeat steps 4-8
13. confirm you now see the appropriate VPN IP address (for your region)
14. switch to another region (for bonus points)

step 9 - AT&T ISP	step 13 - Singapore)	step 14 - UK

WebRTC - PASSED

1. connect to BraveVPN
2. load https://browserleaks.com/webrtc
3. iterate through the values for WebRTC IP handling policy
4. note the absence/presence and value of both local + public IP addresses, as reflected by their respective setting

VPN connected

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP

Disconnected from VPN

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP

Keyboard accessibility - FAILED

1. set up VPN
2. click on the VPN button on the browser toolbar
3. click on the Settings (gear) icon
4. press tab to forward-cycle through elements
5. press shift + tab to backwards-cycle through the dialog links
6. confirm you can press spacebar and return to select (“click”) links

Encountered:

• https://github.com/brave/brave-browser/issues/22631
• https://github.com/brave/brave-browser/issues/22632
• https://github.com/brave/brave-browser/issues/22732