Implement Brave VPN on Desktop

[bsclifton]

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 Handle not having permission to write config (macOS) #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 Implement Brave VPN on Windows #15805
• macOS Implement Brave VPN on macOS #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 #12197 and #14048 - development done by @deeppandya

iOS is already live; please see brave/brave-ios#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

[simonhong]

@rebron Question about VPN state in multi profile situation.
Should browser's vpn status(ex, vpn button state) should be per-profile or should be local state?

If user buy VPN with default profile, browser can get credentials within this profile.
However, user can't get credentials from another new profile before user login to our premium page again.

If we want to make VPN state globally, credentials should be shared across the profiles
Or should we make user login again in new profiles?

[rebron]

Should be per profile and not global.

[starboyvarun]

@bsclifton It would look more attractive if we add a VPN button beside the extension button. It will be easy to access plus more people can use it easily.i.e noncoders. etc
And we can also give premium Vpn to Users with rewards. This way users can view more ads and can create revenue indirectly.
Thanks!

[bsclifton]

@starboyvarun here's where it shows now:

When clicked, a UI will popup where you can interact with:

Good call on the VPN w/ Rewards. We're exploring that for sure - after we get this main use-case working, we intend to look at this 😄

[starboyvarun]

@bsclifton yea, it's in a perfect position.
Thanks for taking the suggestions.

[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
#22694		#22695

Logged:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694
• Hook up About Brave Firewall + VPN link in Settings dialog #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:

• Sometimes it takes multiple attempts to (re)connect to VPN after machine was idle/asleep #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:

• Contact technical support form doesn't dismiss after submission #22731

Edge cases and error states

Cancel plan - FAILED

(UI unimplemented)

Logged:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694

Edit payment - FAILED

(UI unimplemented)

Logged:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694
• Edit payment method error-dialog text is wrong #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:

• Incorrect error dialog used when credentials fail #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:

• Should show connection-error message after disabling network #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:

• Too many recovery attempts on 5th-device VPN activation #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:

• Windows 10 leaks DNS when using VPN by sending DNS to all network interfaces #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:

• Missing focus states/events for radio buttons in VPN-support dialog #22631
• Clicking on VPN-location radio buttons doesn't work #22632
• Spacebar should work like clicks in Settings dialog #22732

Issues encountered while testing:

• Not prompted to re-Allow enabling Brave's VPN Configuration until restart #22676
• After restart, VPN status icon/button doesn't show connected status until clicked #22677
• VPN context-menu items should use sentence casing #22653
• VPN Settings (gear) icon is missing its tooltip #22636
• Clicking on VPN-location radio buttons doesn't work #22632
• Missing focus states/events for radio buttons in VPN-support dialog #22631
• Hook up Privacy Policy link in Contact technical support form #22713
• Implement Buy button link on VPN dialog #22710
• Implement Already purchased VPN? button link on VPN dialog #22711
• Brave VPN from hamburger menu doesn't always show available sub menu #22726
• Sometimes it takes multiple attempts to (re)connect to VPN after machine was idle/asleep #22728
• Hostname field in submitted user-support data to Guardian lists city, rather than actual hostname #22628
• Contact technical support form doesn't dismiss after submission #22731
• Spacebar should work like clicks in Settings dialog #22732
• Should show connection-error message after disabling network #22754
• Too many recovery attempts on 5th-device VPN activation #22757
• Clicking VPN button when logged in sometimes shows expired page #22882
• VPN connect / reconnecting may not have a proper timeout #22883
• Incorrect error dialog used when credentials fail #22972

[LaurenWags]

Verified on macOS arm64/M1 with

Brave | 1.39.89 Chromium: 101.0.4951.41 (Official Build) beta (arm64)
-- | --
Revision | 93c720db8323b3ec10d056025ab95c23a31997c9-refs/branch-heads/4951@{#904}
OS | macOS Version 12.3.1 (Build 21E258)

Encountered the following issues during testing (where not otherwise referenced in below cases):

• Brave VPN from hamburger menu doesn't always show available sub menu #22726

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

Suggested: also set Show VPN status in menu bar via Apple -> System Preferences -> Network for BraveVPN as per #15804 (comment).

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.

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	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

example	example	example	example	example	example	example	example	example

Light

example	example	example	example	example	example	example	example	example

brave://settings/appearance

VPN button - PASSED

• 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

• Hide VPN button in toolbar - hides the VPN icon
• Show VPN button in toolbar - shows the VPN icon
• 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/

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, follow up issues logged

Click on gear icon to get settings:

Example	Example

Manage subscription	Contact technical support	About Brave Firewall + VPN
#22694		#22695

Encountered:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694
• Hook up About Brave Firewall + VPN link in Settings dialog #22695

Brave Premium login

Purchasing VPN with a new account - PASSED

Steps:

Followed steps from Shared VPN-Setup Steps (https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB), and confirmed able to use VPN with a fresh account.

Log in to an existing account which has VPN - PASSED

Steps:

Modified "Shared VPN-Setup Steps" (https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB) to use account created above on a new browser profile.

example	example	example	example	example

Brave | 1.39.96 Chromium: 101.0.4951.54 (Official Build) beta (arm64)
-- | --
Revision | 67da1aeb32cedd27634ca6634fb79cbd85d3f0ab-refs/branch-heads/4951@{#1126}
OS | macOS Version 12.3.1 (Build 21E258)

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 Germany)
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: Germany)

default region	default region	default region	Germany timezone	auto-detected region	IP/location details

Connecting/disconnecting - PASSED w/ follow up issue

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.

Additionally, alternated the above Brave VPN connection-toggle method with:

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

Encountered:

• Sometimes it takes multiple attempts to (re)connect to VPN after machine was idle/asleep #22728

Brave | 1.39.101 Chromium: 101.0.4951.64 (Official Build) beta (arm64)
-- | --
Revision | d1daa9897e1bc1d507d6be8f2346e377e5505905-refs/branch-heads/4951@{#1208}
OS | macOS Version 12.3.1 (Build 21E258)

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

Step 3 auto-detected region	Step 4 region list	Step 4 region list, part 2	Step 6 region	Step 9 region	Step 11 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

Also, repeated above test but used the quick access VPN status from macOS menu bar

example	example	example	example

Brave | 1.39.106 Chromium: 101.0.4951.67 (Official Build) beta (arm64)
-- | --
Revision | 8888ee7a24e2c36661ddb9536c35b7d4852a3a98-refs/branch-heads/4951@{#1230}
OS | macOS Version 12.3.1 (Build 21E258)

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 a browser that is not Brave (Safari, Chrome, FF, etc)

example	example	example

Also, repeated above test but used the quick access VPN status from macOS menu bar

example	example	example

Creating a support ticket - SKIPPED

Per discussion with @stephendonner via https://bravesoftware.slack.com/archives/GAA4017R7/p1652193195321979?thread_ts=1652193018.128719&cid=GAA4017R7, skipping this as he has already verified on macOS and this is live.

Stephen will add notes for macOS to #18469 which covers this case as well.

Edge cases and error states

Cancel plan - UNIMPLEMENTED

See logged issue #22694

Edit payment - UIMPLEMENTED

See logged issues #22694 and #22717

Expired credit card / credentials - FAILED

See logged issue #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. It should work now

actual (fails)	Figma	after restart (works)

Encountered/reproduced #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.

Encountered logged issue #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

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

Brave | 1.40.73 Chromium: 102.0.5005.61 (Official Build) dev (arm64)
-- | --
Revision | 0e59bcc00cc4985ce39ad31c150065f159d95ad3-refs/branch-heads/5005@{#819}
OS | macOS Version 12.3.1 (Build 21E258)

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 13	step 14

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 logged issues:

• Missing focus states/events for radio buttons in VPN-support dialog #22631
• Clicking on VPN-location radio buttons doesn't work #22632
• Spacebar should work like clicks in Settings dialog #22732

[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 #22694
Encountered #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:

• Sometimes it takes multiple attempts to (re)connect to VPN after machine was idle/asleep #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:

• Contact technical support form doesn't dismiss after submission #22731

Edge cases and error states

Cancel plan - FAILED

(UI unimplemented)

Encountered:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694

Edit payment - FAILED

(UI unimplemented)

Encountered:

• Hook Manage subscription link in Settings dialog up to the Accounts site #22694
• Edit payment method error-dialog text is wrong #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:

• Incorrect error dialog used when credentials fail #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:

• Should show connection-error message after disabling network #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:

• Too many recovery attempts on 5th-device VPN activation #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:

• Windows 10 leaks DNS when using VPN by sending DNS to all network interfaces #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:

• Missing focus states/events for radio buttons in VPN-support dialog #22631
• Clicking on VPN-location radio buttons doesn't work #22632
• Spacebar should work like clicks in Settings dialog #22732

[MadhaviSeelam]

Verification Complete using

Brave | 1.39.101 Chromium: 101.0.4951.64 (Official Build) beta (64-bit)
-- | --
Revision | d1daa9897e1bc1d507d6be8f2346e377e5505905-refs/branch-heads/4951@{#1208}
OS | Windows 11 Version 21H2 (Build 22000.613)

Filed bugs:
#22975
#23017
#23018
#23119

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):

Ex1	Ex2	Ex3	Ex4

Suggested: set Show VPN status in menu bar via Manage Notifications->Settings->BraveVPN
VPN Connection is visible in Settings > Networking & Internet > VPN

Between-test cleanup

BraveVPN OS-config removal - PASSED

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

Ex1	Ex2

Brave | 1.40.70 Chromium: 102.0.5005.50 (Official Build) beta (64-bit)
-- | --
Revision | f6e2cf8f59ec714bdcff8499991d55898875f287-refs/branch-heads/5005@{#648}
OS | Windows 11 Version 21H2 (Build 22000.675)

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

Ex1	Ex2	Ex3	Ex4	Ex5

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

VPN button - PASSED

• 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

Toggle_ON	Toggle_OFF	Toggle_ON_Restart

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_toolbar	VPN Hidden	Send Feeback	About Brave	Manage plan

Hamburger flyout menu - PASSED

Click on the "hamburger" menu icon on the browser toolbar

• Hide VPN button in toolbar - hides the VPN icon
• Show VPN button in toolbar - shows the VPN icon
• 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/

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
					<

Brave Premium login

Purchasing VPN with a new account - PASSED

Steps:

Followed steps from Shared VPN-Setup Steps (https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB), and confirmed able to use VPN with a fresh account.

Log in to an existing account which has VPN - PASSED

Steps:

Modified "Shared VPN-Setup Steps" (https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB) to use account created above on a new browser profile.

Ex1	Ex2	Ex3

Brave | 1.40.75 Chromium: 102.0.5005.61 (Official Build) beta (64-bit)
-- | --
Revision | 0e59bcc00cc4985ce39ad31c150065f159d95ad3-refs/branch-heads/5005@{#819}
OS | Windows 11 Version 21H2 (Build 22000.675)

Post-purchase UX

Default region selection - PASSED

Encountered same issue with Australian region ##22882

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 zone to be in another region (like Australia)
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: Australia)

default region	IP/location details	Australia timezone	IP/location details	auto-detected region

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 - my regular region returned

Ex1	Ex2	Ex3

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

Additionally, alternated the above Brave VPN connection-toggle method with:

• flyout menu
• Taskbar >>Click Wifi >>VPN>>BraveVPN>>Connect/Disconnect
• Settings>>Network&internet>>VPN>>BraveVPN>>Connect/Disconnect

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

Step 3 auto-detected region	Step 4 region list	Step 4 region list, part 2	Step 6 region	Step 9 region	Step 11 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:

1. Confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
2. Close Brave
3. Go to OS's VPN section -->Start>>Settings>Network&internet>>VPN
4. Click on Connect in BraveVPN connection
5. Confirm the VPN button icon lights up green in the toolbar
6. Confirm you are connected to the VPN
7. Verified that Brave's VPN button shows as gray when not connected

Step1	Step3	Step5	Step7	Step7a

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:

1. Confirm you can disconnect the Brave VPN via the toggle in the toolbar icon, after successfully setting it up
2. Close Brave
3. Go to OS's VPN section -->Start>>Settings>Network&internet>>VPN
4. Click on Connect in the BraveVPN connection
5. Load ip2location.com/demo using a browser that is not Brave (Safari, Chrome, FF, etc)
6. Verified correct region

Step2	Step5	Step5a	Step6

Creating a support ticket - SKIPPED

Per discussion with @stephendonner via https://bravesoftware.slack.com/archives/GAA4017R7/p1652193195321979?thread_ts=1652193018.128719&cid=GAA4017R7, skipping this as he has already verified on macOS and this is live.

Stephen will add notes for macOS to #18469 which covers this case as well.

Edge cases and error states

Cancel plan - UNIMPLEMENTED

See logged issue #22694

Edit payment - UNIMPLEMENTED

See logged issues #22694 and #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

Reproduced the issue #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. It should work now

Filed ##23119
As the Brave VPN connection is taking longer, the work around is disconnect and reconnect Brave VPN

Ex1	Ex2	Ex3	Ex4

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.

I was able to test only two physical devices when Iogged in with same account and it was successful.

Device 1	Device 2

so didn't see the issue #22757
However, I have tested with browser profiles on desktop. Saw Edit Payment modal for 3rd profile when logged in with same email address. I am not sure how the VPN functionality should work for profiles so filed a bug #22975

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

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 13	step 14

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 already logged issues:

• Missing focus states/events for radio buttons in VPN-support dialog #22631
• Clicking on VPN-location radio buttons doesn't work #22632
• Spacebar should work like clicks in Settings dialog #22732