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)

• [x] 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

• [x] Add stub brave vpn button to toolbar
• [x] Add Brave VPN to hamburger menu
• [x] Add vpn button toggle option in settings
• [x] VPN should have a right click to hide
• [x] Debug crash when changing theme color (due to VPN button)
• [x] 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

• [x] Stripe session/checkout error trying to purchase VPN with experimental SKU SDK
• [x] 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

• [x] Notify more detailed VPN connecting status change on Windows
• [x] 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

• [x] VPN panel (logged in to Brave Premium)
• [x] VPN panel (NOT logged in to Brave Premium)
• [x] VPN panel (login expires)
• [x] VPN Panel - create a basic server selection UI w/o service logic
• [x] Handle not having permission to write config (macOS)
• [x] Determine default vpn region based on user's timezone or country code
• [ ] [Desktop VPN] Add region flag icons to vpn region list
• [x] 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

• [x] Backend integration (TBD - authenticating purchase, etc)
• [x] Windows https://github.com/brave/brave-browser/issues/15805
• [x] 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

• [x] Makes VPN Service fetch/cache region list
• [x] Add state machine to vpn service
• [x] Load VPN urls from app menu
• [x] Pass vpn urls to webui via mojo
• [x] Add purchased state in brave_vpn.mojom and manage it in service
• [x] Fetch hostnames for selected vpn region and cache it in service
• [x] Store fetched region list/device region in prefs and update it periodically in background
• [x] Wiring up BraveVPNService with BraveVPNOSConnectionAPI
• [x] Create vpn panel handler for webui to call and interface it with mojom
• [x] Add mojo observer to vpn desktop service
• [x] Get all regions in desktop vpn service and expose to mojom
• [x] Get region list from the desktop service to webui
• [x] Add vpn lifecycle events to webui
• [x] Add gradient animation
• [x] 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` ------------------------|-----------------------------|------------------------------ 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 18. press `shift` + `tab` to backwards-cycle through the dialog links 19. 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

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

• https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/15804#issuecomment-1116639987.

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` ------------------------|-----------------------------|------------------------------ https://github.com/brave/brave-browser/issues/22694 | | https://github.com/brave/brave-browser/issues/22695 Encountered: * 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` (`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: * https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/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` 7. Unplug your network cable (or disable Wi-Fi) 8. Click the `VPN` button (top right, next to hamburger button) 9. Click the toggle to `ENABLE` 10. You should see the error about not being able to connect 11. Plug network cable back in OR enable Wi-Fi (disabled in step 2) 12. Click the `Try again` button 13. It should work now actual (fails) | Figma | after restart (works) -------|------|---------- | | Encountered/reproduced 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. Encountered logged issue 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 ---------|--------- |

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 18. press `shift` + `tab` to backwards-cycle through the dialog links 19. confirm you can press `spacebar` and `return` to select ("click") links Encountered logged issues: * https://github.com/brave/brave-browser/issues/22631 * https://github.com/brave/brave-browser/issues/22632 * https://github.com/brave/brave-browser/issues/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 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 18. press `shift` + `tab` to backwards-cycle through the dialog links 19. 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

[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 #https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/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` 7. Unplug your network cable (or disable Wi-Fi) 8. Click the `VPN` button (top right, next to hamburger button) 9. Click the toggle to `ENABLE` 10. You should see the error about not being able to connect 11. Plug network cable back in OR enable Wi-Fi (disabled in step 2) 12. Click the `Try again` button 13. It should work now Filed #https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/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` 7. 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) 8. click on `Start Torrent` 9. return to the `https://ipleak.net/` tab 10. confirm that you see your public (local ISP) IP address 11. connect to `BraveVPN` via your preferred method (flyout menu, button toggle, macOS system bar (top), and `Network` control panel in `System Preferences`) 12. `shift` + `reload` the page (to purge cache) <------ IMPORTANT 13. repeat steps 4-8 14. confirm you now see the appropriate VPN IP address (for your region) 15. 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 18. press `shift` + `tab` to backwards-cycle through the dialog links 19. confirm you can press `spacebar` and `return` to select ("click") links Encountered already logged issues: * https://github.com/brave/brave-browser/issues/22631 * https://github.com/brave/brave-browser/issues/22632 * https://github.com/brave/brave-browser/issues/22732