TypeScript Selenium Project

A TypeScript project with Selenium WebDriver and VSCode debugging configured. This project demonstrates how to use Selenium to automate browser interactions, specifically opening TripAdvisor.com.

This project is Git-enabled, allowing you to track changes and revert to previous states if needed.

Project Structure

.
├── .vscode/             # VSCode configuration
│   ├── launch.json      # Debug configuration
│   └── tasks.json       # Build tasks
├── src/                 # Source files
│   └── index.ts         # Selenium script to open TripAdvisor.com
├── dist/                # Compiled JavaScript files
├── package.json         # Project dependencies and scripts
├── tsconfig.json        # TypeScript configuration
└── README.md            # This file

Dependencies

This project uses the following dependencies:

• TypeScript: JavaScript with syntax for types
• Selenium WebDriver: Browser automation framework
• ChromeDriver: WebDriver for Chrome browser

Available Scripts

• npm run build - Compiles TypeScript to JavaScript
• npm run start - Runs the compiled JavaScript (opens TripAdvisor.com in Chrome)
• npm run dev - Runs the TypeScript code directly using ts-node (opens TripAdvisor.com in Chrome)

Selenium WebDriver

The main script (src/index.ts) demonstrates:

1. Setting up a Chrome WebDriver instance with session management
2. Navigating to TripAdvisor.com
3. Waiting for the page to load
4. Closing the browser after a delay

Session Management

This project includes session management capabilities:

• Browser sessions are stored in the sessions/ directory
• Chrome is configured to use a persistent user data directory
• Sessions persist between runs, allowing for:
  • Preserved cookies and login states
  • Cached resources for faster loading
  • Consistent testing environment

To clear session data and start fresh, you can delete the contents of the sessions/ directory (except for README.md).

Debugging in VSCode

This project includes two debug configurations:

1. Launch Program - Builds the TypeScript code and then debugs the compiled JavaScript
2. Debug TS with ts-node - Directly debugs the TypeScript code using ts-node

Both configurations can be used to debug the Selenium WebDriver script.

To start debugging:

1. Open the Debug view in VSCode (Ctrl+Shift+D or Cmd+Shift+D on macOS)
2. Select the debug configuration you want to use from the dropdown
3. Press F5 or click the green play button

Adding Breakpoints

1. Click in the gutter next to the line number where you want to add a breakpoint
2. When debugging, execution will pause at the breakpoint
3. You can inspect variables, the call stack, and step through code

Git Version Control

This project is set up with Git for version control. Here's how to use Git to track and revert changes:

Viewing Changes

# See what files have been modified
git status

# See detailed changes in files
git diff

Committing Changes

# Stage changes for commit
git add .

# Commit changes with a descriptive message
git commit -m "Description of changes"

Reverting Changes

# Discard changes in working directory for a specific file
git checkout -- <file>

# Discard all changes in working directory
git checkout -- .

# Revert to a specific commit
git reset --hard <commit-hash>

# Undo the last commit but keep the changes
git reset --soft HEAD~1

# Create a new commit that undoes changes from a previous commit
git revert <commit-hash>

Viewing History

# View commit history
git log

# View commit history with a graph
git log --graph --oneline --all

Branching

# Create a new branch
git branch <branch-name>

# Switch to a branch
git checkout <branch-name>

# Create and switch to a new branch
git checkout -b <branch-name>

# Merge a branch into the current branch
git merge <branch-name>