147 lines
3.9 KiB
Markdown
147 lines
3.9 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# See what files have been modified
|
|
git status
|
|
|
|
# See detailed changes in files
|
|
git diff
|
|
```
|
|
|
|
### Committing Changes
|
|
|
|
```bash
|
|
# Stage changes for commit
|
|
git add .
|
|
|
|
# Commit changes with a descriptive message
|
|
git commit -m "Description of changes"
|
|
```
|
|
|
|
### Reverting Changes
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# View commit history
|
|
git log
|
|
|
|
# View commit history with a graph
|
|
git log --graph --oneline --all
|
|
```
|
|
|
|
### Branching
|
|
|
|
```bash
|
|
# 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>
|
|
```
|